fix: handle initial render to avoid ui flashing

bpmn-io · Jul 18, 2024 · 5c48e7b · 5c48e7b
1 parent bdf8f13
commit 5c48e7b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/src/components/entries/TextArea.js b/src/components/entries/TextArea.js
@@ -62,6 +62,10 @@ function TextArea(props) {
     setLocalValue(e.target.value);
   };
 
+  useLayoutEffect(() => {
+    autoResize && resizeToContents(ref.current);
+  }, []);
+
   useLayoutEffect(() => {
     visible && autoResize && resizeToContents(ref.current);
   }, [ visible ]);

diff --git a/test/spec/components/TextArea.spec.js b/test/spec/components/TextArea.spec.js
@@ -437,6 +437,34 @@ describe('<TextArea>', function() {
 
   describe('auto resize', function() {
 
+    it('should resize initially', async function() {
+
+      // given
+      const result = createTextArea({
+        container,
+        id: 'textarea',
+        getValue() {
+          return `
+            1
+            2
+            3
+            4`;
+        },
+        autoResize: true
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      const initialHeight = input.clientHeight;
+
+      // then
+      await waitFor(() => {
+        expect(initialHeight).to.be.greaterThan(60);
+      });
+    });
+
+
     it('should resize on input', function() {
 
       // given