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

[ianef]

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 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]

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

[tmorehouse]

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.

[ianef]

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]

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]

@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.