fix: text area resizes properly every time it becomes visible (#374)

* fix: text area resizes properly every time it becomes visible

Closes #314

src/components/entries/TextArea.js

@@ -11,7 +11,8 @@ import classnames from 'classnames';
 
 import {
   useError,
-  useShowEntryEvent
+  useShowEntryEvent,
+  useElementVisible,
 } from '../../hooks';
 
 import { isFunction } from 'min-dash';
@@ -47,6 +48,8 @@ function TextArea(props) {
 
   const ref = useShowEntryEvent(id);
 
+  const visible = useElementVisible(ref.current);
+
   const handleInputCallback = useMemo(() => {
     return debounce((target) => onInput(target.value.length ? target.value : undefined));
   }, [ onInput, debounce ]);
@@ -63,6 +66,10 @@ function TextArea(props) {
     autoResize && resizeToContents(ref.current);
   }, []);
 
+  useLayoutEffect(() => {
+    visible && autoResize && resizeToContents(ref.current);
+  }, [ visible ]);
+
   useEffect(() => {
     if (value === localValue) {
       return;

src/hooks/index.js

@@ -7,4 +7,5 @@ export { usePrevious } from './usePrevious';
 export { useShowEntryEvent } from './useShowEntryEvent';
 export { useStickyIntersectionObserver } from './useStickyIntersectionObserver';
 export { useStaticCallback } from './useStaticCallback';
-export { useTooltipContext } from './useTooltipContext';
+export { useTooltipContext } from './useTooltipContext';
+export { useElementVisible } from './useElementVisible';

src/hooks/useElementVisible.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect, useState } from 'preact/hooks';
+
+export function useElementVisible(element) {
+
+  const [ visible, setVisible ] = useState(!!element && !!element.clientHeight);
+
+  useLayoutEffect(() => {
+    if (!element) return;
+
+    const resizeObserver = new ResizeObserver(([ entry ]) => {
+      requestAnimationFrame(() => {
+        const newVisible = !!entry.contentRect.height;
+        if (newVisible !== visible) {
+          setVisible(newVisible);
+        }
+      });
+    });
+
+    resizeObserver.observe(element);
+
+    return () => resizeObserver.disconnect();
+  }, [ element, visible ]);
+
+  return visible;
+}

test/spec/components/TextArea.spec.js

@@ -4,6 +4,8 @@ import {
   render
 } from '@testing-library/preact/pure';
 
+import { waitFor } from '@testing-library/preact';
+
 import TestContainer from 'mocha-test-container-support';
 
 import {
@@ -435,19 +437,18 @@ describe('<TextArea>', function() {
 
   describe('auto resize', function() {
 
-    it('should resize initially', function() {
+    it('should resize initially', async function() {
 
       // given
       const result = createTextArea({
         container,
         id: 'textarea',
         getValue() {
           return `
-HALLO
-WELT
-WIE
-GEHTS
-`;
+            1
+            2
+            3
+            4`;
         },
         autoResize: true
       });
@@ -458,7 +459,9 @@ GEHTS
       const initialHeight = input.clientHeight;
 
       // then
-      expect(initialHeight).to.be.greaterThan(60);
+      await waitFor(() => {
+        expect(initialHeight).to.be.greaterThan(60);
+      });
     });
 
 
@@ -517,6 +520,37 @@ GEHTS
       expect(input.clientHeight).to.be.lessThan(35);
     });
 
+
+    it('should resize when becomes visible', async function() {
+
+      // given
+      const result = createTextArea({
+        container,
+        id: 'textarea',
+        autoResize: true,
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+      const initialHeight = input.clientHeight;
+
+      // when
+      changeInput(input, 'foo\nbar\nbar\nbar');
+      result.container.style.display = 'none';
+      const hiddenHeight = input.clientHeight;
+
+      // then
+      expect(hiddenHeight).to.be.eq(0);
+
+      // when
+      result.container.style.display = 'block';
+      const visibleHeight = input.clientHeight;
+
+      // then
+      await waitFor(() => {
+        expect(visibleHeight).to.be.greaterThan(initialHeight * 2);
+      });
+    });
+
   });
 
 

test/spec/hooks/useElementVisible.spec.js

@@ -0,0 +1,109 @@
+import { renderHook } from '@testing-library/preact-hooks';
+
+import { waitFor } from '@testing-library/preact';
+
+import { useElementVisible } from 'src/hooks';
+
+import TestContainer from 'mocha-test-container-support';
+
+
+describe('hooks/useElementVisible', function() {
+
+  let container;
+  beforeEach(function() {
+    container = TestContainer.get(this);
+  });
+
+
+  it('should return true for visible element', async function() {
+
+    // given
+    const element = global.document.createElement('div');
+    container.appendChild(element);
+
+    // when
+    const { result } = renderHook(() => useElementVisible(element));
+
+    // then
+    expect(result.current).to.be.true;
+  });
+
+
+  it('should return false for not visible element', async function() {
+
+    // given
+    const element = global.document.createElement('div');
+
+    // when
+    const { result } = renderHook(() => useElementVisible(element));
+
+    // then
+    expect(result.current).to.be.false;
+  });
+
+
+  it('should return false when element does not exist', async function() {
+
+    // given
+    const element = undefined;
+
+    // when
+    const { result } = renderHook(() => useElementVisible(element));
+
+    // then
+    expect(result.current).to.be.false;
+  });
+
+
+  it('should return true when element becomes visible', async function() {
+
+    // given
+    const element = global.document.createElement('div');
+    container.appendChild(element);
+    element.style.display = 'none';
+
+    // when
+    const { rerender, result } = renderHook(() => useElementVisible(element));
+
+    // then
+    await waitFor(() => {
+      rerender();
+      expect(result.current).to.be.false;
+    });
+
+    // when
+    element.style.display = 'block';
+
+    // then
+    await waitFor(() => {
+      rerender();
+      expect(result.current).to.be.true;
+    });
+  });
+
+
+  it('should return false when element becomes hidden', async function() {
+
+    // given
+    const element = global.document.createElement('div');
+    container.appendChild(element);
+
+    // when
+    const { rerender, result } = renderHook(() => useElementVisible(element));
+
+    // then
+    await waitFor(() => {
+      rerender();
+      expect(result.current).to.be.true;
+    });
+
+    // when
+    element.style.display = 'none';
+
+    // then
+    await waitFor(() => {
+      rerender();
+      expect(result.current).to.be.false;
+    });
+  });
+});