@bpmn-io/properties-panel 1.8.0 → 1.8.2

package/dist/index.esm.js

@@ -393,7 +393,16 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
     let observer;
     if (ref.current) {
       const scrollContainer = query(scrollContainerSelector);
+
+      // TODO(@barmac): test this
+      if (!scrollContainer) {
+        return;
+      }
       observer = new Observer(entries => {
+        // The ScrollContainer is unmounted, do not update sticky state
+        if (scrollContainer.scrollHeight === 0) {
+          return;
+        }
         entries.forEach(entry => {
           if (entry.intersectionRatio < 1) {
             setSticky(true);
@@ -416,7 +425,7 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
         observer.unobserve(ref.current);
       }
     };
-  }, [ref, scrollContainerSelector, setSticky]);
+  }, [ref.current, scrollContainerSelector, setSticky]);
 }
 
 /**
@@ -640,7 +649,7 @@ function PropertiesPanel(props) {
   const [layout, setLayout] = useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
-  useUpdateEffect(() => {
+  useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
@@ -761,14 +770,14 @@ function createDescriptionContext(overrides = {}) {
 // hooks //////////////////
 
 /**
- * This hook behaves like useEffect, but does not trigger on the first render.
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
  *
  * @param {Function} effect
  * @param {Array} deps
  */
-function useUpdateEffect(effect, deps) {
+function useUpdateLayoutEffect(effect, deps) {
   const isMounted = useRef(false);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {