fix(select): optionsListWidth prop (#685)

core-ds · Jun 4, 2021 · 3b87e73 · 3b87e73
1 parent 71a51dc
commit 3b87e73
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -284,25 +284,29 @@ export const BaseSelect = forwardRef(
             if (defaultOpen) openMenu();
         }, [defaultOpen, openMenu]);
 
-        const calcOptionsListWidth = () => {
+        const calcOptionsListWidth = useCallback(() => {
             if (listRef.current) {
                 const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
 
                 const optionsListMinWidth = rootRef.current
                     ? rootRef.current.getBoundingClientRect().width
                     : 0;
 
+                listRef.current.setAttribute('style', '');
                 listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
             }
-        };
-
-        const resizeObserver = useRef(new ResizeObserver(calcOptionsListWidth));
+        }, [optionsListWidth]);
 
         useEffect(() => {
-            if (!rootRef.current || !resizeObserver.current) return;
+            const observer = new ResizeObserver(calcOptionsListWidth);
+            if (rootRef.current) {
+                observer.observe(rootRef.current);
+            }
 
-            resizeObserver.current[open ? 'observe' : 'unobserve'](rootRef.current);
-        }, [open]);
+            return () => {
+                observer.disconnect();
+            };
+        }, [calcOptionsListWidth, open, optionsListWidth]);
 
         useLayoutEffect(calcOptionsListWidth, [open, optionsListWidth, options, selectedItems]);