Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto-height b-form-textarea within a b-tab does not work #3702

Closed
ianfoulds opened this issue Jul 17, 2019 · 6 comments · Fixed by #3725 or #3937

Comments

@ianfoulds
Copy link

commented Jul 17, 2019

When b-form-textarea is contained within a b-tab that is not initially active, the auto-height feature does not work. In the following code, Tab 1 - the initially active tab, works and the textarea is automatically resized, Tab 2 however does not resize the textarea when clicked.

This can be fixed by calling setHeight() on the b-textarea component when the tab changes but this is not a published API method and resize should occur automatically.

Vue:

    <b-tabs>
      <b-tab title="Tab 1" active>
        <b-form-group label="Tab 1 Notes" label-size="sm" label-cols="3" horizontal>
          <b-form-textarea ref="tab1Notes" size="sm" max-rows="15" v-model="tab1Notes"></b-form-textarea>
        </b-form-group>
      </b-tab>
      <b-tab title="Tab 2">
        <b-form-group label="Tab 2 Notes" label-size="sm" label-cols="3" horizontal>
          <b-form-textarea ref="tab2Notes" size="sm" max-rows="15" v-model="tab2Notes"></b-form-textarea>
        </b-form-group>
      </b-tab>
    </b-tabs>

JS:

import Vue from 'vue';

var indexVm = new Vue({

    el: '#testbed-app',

    data() {
        return {
            tab1Notes: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra leo eget auctor imperdiet. Aliquam interdum tellus in urna sollicitudin mollis.\
            Aenean consectetur justo sit amet efficitur luctus. Maecenas posuere magna neque, nec ultricies diam aliquam ac. Sed venenatis bibendum sapien ut fringilla. \
            Maecenas pulvinar erat eget urna ultricies, non consectetur erat eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; \
            Curabitur lorem nulla, placerat sed ullamcorper et, fermentum nec ipsum. Proin efficitur ipsum sit amet elit posuere vehicula nec at quam. \
            Nulla facilisi. Nunc libero orci, commodo quis nibh eu, porttitor imperdiet dui. Donec mollis suscipit malesuada. Aliquam porta rhoncus nisi, vel volutpat arcu rhoncus sed. \
            Praesent ultrices ligula eu luctus porta. Pellentesque ipsum purus, tempor a eleifend quis, eleifend ut nisl.\
            \
            Ut pulvinar tristique odio et commodo. Praesent ac lorem sapien. Curabitur ut orci ac ante ornare bibendum vel a justo. Nunc sed diam nec urna tristique blandit hendrerit sed dui. \
            Maecenas tempus, velit et convallis tincidunt, mi odio luctus ipsum, eget ullamcorper nunc nulla sit amet eros. Proin ultricies molestie massa, sit amet tincidunt lacus elementum a. Donec id commodo justo.',

            tab2Notes: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus elit eu velit dapibus imperdiet. \
            Aliquam ut accumsan lorem. Vestibulum ut risus sollicitudin, convallis purus non, sollicitudin velit. \
            Aliquam sapien eros, sagittis vitae ornare vitae, dignissim eu arcu. Integer vehicula massa lectus, molestie accumsan ipsum malesuada eu. Integer ut nibh mollis nulla dignissim scelerisque. \
            Sed vitae diam semper, egestas mauris vel, ultrices dui. Suspendisse quis gravida nibh. Donec pellentesque condimentum blandit. \
            Proin porttitor risus lacus, sit amet facilisis sem commodo non. Nam laoreet tempus quam non efficitur. In eu accumsan nulla. Donec eu tincidunt nibh, quis lobortis nisl.'
        };
    },
    
    mounted: function() {
    },
    
    methods: {
    }
});

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 17, 2019

This is because content of the b-tab is rendered in dom, but visually hidden. b-form-textarea checks for height on mount (and on content change), and since it is not visible (diplay:none on parent b-tab), it can't compute the height.

This issue would happen anytime a b-form-textarea with auto-height is placed inside, say, a parent container that has the directive v-show on it to hide/show the content.

You can make the b-tab lazy (<b-tab title"foo" lazy>...</b-tab>) which will not render (mount) the tab's contents until the tab is shown. This will trigger the auto-height calculation.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 17, 2019

See this fiddle https://jsfiddle.net/hzcnykmf/ for an example

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 17, 2019

We might be able to optionally scope the b-tab default slot and pass the tab's active state as a slot-prop which would could use to v-if certain parts of the tab's content into the dom.

@ianfoulds

This comment has been minimized.

Copy link
Author

commented Jul 18, 2019

Many thanks Troy. The 'lazy' attribute works fine for me. It may be worthwhile adding a comment to the Auto-height section of the b-form-textarea documentation that elements contained within a b-tab would need the lazy attribute to force a caculation.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 18, 2019

Yeah... it would apply to things like non-lazy modals as well (anything that uses display: none or v-show) to hide and show content that may contain an auto height textarea.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 24, 2019

@ianfoulds PR #3937 fixes the original issue, as long as the browser has IntersectionObserver support (natively or via a polyfill).

This will be available in the 2.0.0 stable release.

tmorehouse added a commit that referenced this issue Aug 26, 2019
fix(b-form-textarea): handle initial auto-height when in modal, tabs,…
… or other component with transition or which uses `v-show` (fixes #3936, #3702) (#3937)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.