Merge pull request #13211 from nielsvh2103/3.x

Fix textarea resizing preserving heights with/without autosize

packages/forms/resources/js/components/textarea.js

@@ -1,14 +1,45 @@
 export default function textareaFormComponent({ initialHeight }) {
     return {
+        height: initialHeight + 'rem',
+
         init: function () {
-            this.render()
+            this.setInitialHeight()
+            this.setUpResizeObserver()
         },
 
-        render: function () {
-            if (this.$el.scrollHeight > 0) {
-                this.$el.style.height = initialHeight + 'rem'
-                this.$el.style.height = this.$el.scrollHeight + 'px'
+        setInitialHeight: function () {
+            this.height = initialHeight + 'rem'
+
+            if (this.$el.scrollHeight <= 0) {
+                return
+            }
+
+            this.$el.style.height = this.height
+        },
+
+        resize: function () {
+            this.setInitialHeight()
+
+            if (this.$el.scrollHeight <= 0) {
+                return
             }
+
+            const newHeight = this.$el.scrollHeight + 'px'
+
+            if (this.height === newHeight) {
+                return
+            }
+
+            this.height = newHeight
+            this.$el.style.height = this.height
+        },
+
+        setUpResizeObserver: function () {
+            const observer = new ResizeObserver(() => {
+                this.height = this.$el.style.height
+            })
+
+            observer.observe(this.$el)
         },
     }
 }

packages/forms/resources/views/components/textarea.blade.php

@@ -34,21 +34,20 @@
         "
     >
         <textarea
+            @if (FilamentView::hasSpaMode())
+                ax-load="visible"
+            @else
+                ax-load
+            @endif
+            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"
+            x-data="textareaFormComponent({ initialHeight: @js($initialHeight) })"
             @if ($shouldAutosize)
-                @if (FilamentView::hasSpaMode())
-                    ax-load="visible"
-                @else
-                    ax-load
-                @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"
-                x-data="textareaFormComponent({ initialHeight: @js($initialHeight) })"
-                x-intersect.once="render()"
-                x-on:input="render()"
-                x-on:resize.window="render()"
-                {{ $getExtraAlpineAttributeBag() }}
+                x-intersect.once="resize()"
+                x-on:input="resize()"
+                x-on:resize.window="resize()"
             @endif
-            x-ignore
-            wire:ignore.style.height
+            x-bind:style="{ height }"
+            {{ $getExtraAlpineAttributeBag() }}
             {{
                 $getExtraInputAttributeBag()
                     ->merge([
@@ -69,9 +68,6 @@
                         'block w-full border-none bg-transparent px-3 py-1.5 text-base text-gray-950 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6',
                         'resize-none' => $shouldAutosize,
                     ])
-                    ->style([
-                        "height: {$initialHeight}rem" => $shouldAutosize,
-                    ])
             }}
         ></textarea>
     </x-filament::input.wrapper>