- BsTextArea: fixed bug could not determine its height when auto-grow and readonly were enabled and the model-value wasn't empty.

- Update CHANGELOG.md
- Bump to version v2.17

Author: ahmadfajar

CHANGELOG.md

@@ -3,6 +3,16 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.1.7
+
+Released: February 03, 2025
+
+### Bug Fixes
+
+- **BsTextArea**: fixed bug could not determine its height when `auto-grow` and `readonly`
+  were enabled and the `model-value` wasn't empty.
+
+
 ## v2.1.6
 
 Released: February 01, 2025

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-mdbootstrap",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Bootstrap5 Material Design Components for Vue.js",
   "author": {
     "name": "Ahmad Fajar",

scss/banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Vue MDBootstrap v2.1.6
+ * Vue MDBootstrap v2.1.7
  * Released under the BSD-3 License.
  * Copyright Ahmad Fajar (https://ahmadfajar.github.io).
  */

src/components/Field/BsTextArea.ts

@@ -11,7 +11,7 @@ import { cssPrefix } from '@/mixins/CommonApi';
 import { booleanProp, stringProp, validStringOrNumberProp } from '@/mixins/CommonProps';
 import type { TBsTextArea, TRecord, TTextAreaOptionProps } from '@/types';
 import Helper from '@/utils/Helper';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 
 export default defineComponent<TBsTextArea>({
     name: 'BsTextArea',
@@ -63,10 +63,11 @@ export default defineComponent<TBsTextArea>({
             thisProps.autocomplete && Helper.isString(thisProps.autocomplete)
                 ? thisProps.autocomplete
                 : thisProps.autocomplete
-                  ? 'on'
-                  : Helper.uuid();
+                ? 'on'
+                : Helper.uuid();
         const localValue = ref<string | number | undefined | null>(thisProps.modelValue);
         const rowHeight = ref<string | number | undefined | null>(thisProps.rowHeight);
+        const inputRef = ref<HTMLTextAreaElement>();
         const isFocused = ref(false);
         const validator = useGetValidationResult(thisProps, isFocused);
         const showClearButton = computed<boolean>(() => useShowClearButton(thisProps, localValue));
@@ -97,12 +98,19 @@ export default defineComponent<TBsTextArea>({
                 thisProps.noResize || (thisProps.autoGrow && !thisProps.noResize),
         }));
 
-        watch(
-            () => thisProps.modelValue,
-            (value) => {
-                localValue.value = value;
+        watchEffect(() => {
+            localValue.value = thisProps.modelValue;
+            if (thisProps.autoGrow && !thisProps.noResize && inputRef.value) {
+                inputRef.value.parentElement &&
+                    (inputRef.value.parentElement.dataset.clone = localValue.value as string);
             }
-        );
+        });
+        // watch(
+        //     () => thisProps.modelValue,
+        //     (value) => {
+        //         localValue.value = value;
+        //     }
+        // );
 
         return () =>
             useRenderTextArea(
@@ -111,6 +119,7 @@ export default defineComponent<TBsTextArea>({
                 thisProps,
                 wrapperClasses,
                 controlClasses,
+                inputRef,
                 localValue,
                 rowHeight,
                 isFocused,

src/components/Field/field.scss

@@ -637,9 +637,26 @@
     &.#{vars.$prefix}textarea-autogrow {
         > .#{vars.$prefix}field-inner {
             > .#{vars.$prefix}field-activator {
+                align-items: normal;
+                display: grid;
+
+                &::after {
+                    content: attr(data-clone) " ";
+                    font: inherit;
+                    white-space: pre-wrap;
+                    visibility: hidden;
+                }
+                
                 > textarea {
                     overflow-y: hidden;
                 }
+
+                > textarea,
+                &::after {
+                    margin: var(--#{vars.$prefix}field-padding-top) 0 0 0;
+                    padding: 0 var(--#{vars.$prefix}field-padding-end) var(--#{vars.$prefix}field-padding-bottom) var(--#{vars.$prefix}field-padding-start);
+                    grid-area: 1 / 1 / 2 / 2;
+                }
             }
         }
     }

src/components/Field/mixins/textFieldApi.ts

@@ -275,12 +275,12 @@ export function useCreateValidationIcon(
                                 size: iconSize as Prop<number | undefined>,
                             })
                           : hasValidated && !hasError
-                            ? h<TBsIcon>(BsIcon, {
-                                  class: 'icon-success text-success',
-                                  icon: `check_${iconVariant}` as Prop<string>,
-                                  size: iconSize as Prop<number | undefined>,
-                              })
-                            : undefined,
+                          ? h<TBsIcon>(BsIcon, {
+                                class: 'icon-success text-success',
+                                icon: `check_${iconVariant}` as Prop<string>,
+                                size: iconSize as Prop<number | undefined>,
+                            })
+                          : undefined,
                   ])
                 : createCommentVNode(' v-if-validation-icon ')
         );
@@ -452,6 +452,7 @@ export function useRenderTextField(
 function createTextAreaInputField(
     props: Readonly<TTextAreaOptionProps>,
     emit: TEmitFn,
+    inputRef: Ref<HTMLTextAreaElement | undefined>,
     localValue: Ref<string | number | undefined | null>,
     rowHeight: Ref<string | number | undefined | null>,
     isFocused: Ref<boolean>,
@@ -463,6 +464,7 @@ function createTextAreaInputField(
         h('textarea', {
             ...useMakeInputBaseAttrs(props),
             ...useInputTextFieldAttrs(props, autocomplete),
+            ref: inputRef,
             role: 'textbox',
             rows: canGrow ? 2 : props.rows && !props.rowHeight ? props.rows : undefined,
             style: rowHeight.value && {
@@ -475,12 +477,14 @@ function createTextAreaInputField(
             onKeydown: (e: KeyboardEvent) => emit('keydown', e),
             onInput: (e: InputEvent): void => {
                 if (canGrow) {
-                    const target = e.target as HTMLElement;
-                    target.style.height = 'auto';
-                    nextTick().then(() => {
-                        rowHeight.value = Helper.cssUnit(target.scrollHeight);
-                        target.style.height = Helper.cssUnit(target.scrollHeight) || 'auto';
-                    });
+                    const target = e.target as HTMLTextAreaElement;
+                    target.parentElement &&
+                        (target.parentElement.dataset.clone = target.value as string);
+                    // target.style.height = 'auto';
+                    // nextTick().then(() => {
+                    //     rowHeight.value = Helper.cssUnit(target.scrollHeight);
+                    //     target.style.height = Helper.cssUnit(target.scrollHeight) || 'auto';
+                    // });
                 }
             },
         }),
@@ -494,6 +498,7 @@ export function useRenderTextArea(
     props: Readonly<TTextAreaOptionProps>,
     wrapperCss: ComputedRef<TRecord>,
     controlCss: ComputedRef<TRecord>,
+    inputRef: Ref<HTMLTextAreaElement | undefined>,
     localValue: Ref<string | number | undefined | null>,
     rowHeight: Ref<string | number | undefined | null>,
     isFocused: Ref<boolean>,
@@ -524,6 +529,7 @@ export function useRenderTextArea(
                     createTextAreaInputField(
                         props,
                         emit,
+                        inputRef,
                         localValue,
                         rowHeight,
                         isFocused,