fix(select): options list width calc

core-ds · Apr 9, 2021 · 5294af7 · 5294af7
1 parent a40ffcf
commit 5294af7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -117,7 +117,7 @@ exports[`Snapshots tests should display opened correctly 2`] = `
         class="optionsList"
         id="downshift-3-menu"
         role="listbox"
-        style="min-width: 0;"
+        style="min-width: 0px;"
       >
         <div
           class="optionsList m"

diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -7,6 +7,7 @@ import React, {
     KeyboardEvent,
     FocusEvent,
     useEffect,
+    useLayoutEffect,
 } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
@@ -75,6 +76,7 @@ export const BaseSelect = forwardRef(
     ) => {
         const rootRef = useRef<HTMLLabelElement>(null);
         const fieldRef = useRef<HTMLInputElement>(null);
+        const listRef = useRef<HTMLDivElement>(null);
 
         const itemToString = (option: OptionShape) => (option ? option.key : '');
 
@@ -187,15 +189,11 @@ export const BaseSelect = forwardRef(
         });
 
         const menuProps = (getMenuProps as (options: object, additional: object) => void)(
-            {},
+            { ref: listRef },
             { suppressRefError: true },
         );
         const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
 
-        const optionsListMinWidth = rootRef.current
-            ? rootRef.current.getBoundingClientRect().width
-            : 0;
-
         const handleFieldFocus = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {
             if (onFocus) onFocus(event);
 
@@ -285,6 +283,18 @@ export const BaseSelect = forwardRef(
             if (defaultOpen) openMenu();
         }, [defaultOpen, openMenu]);
 
+        useLayoutEffect(() => {
+            if (listRef.current) {
+                const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
+
+                const optionsListMinWidth = rootRef.current
+                    ? rootRef.current.getBoundingClientRect().width
+                    : 0;
+
+                listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
+            }
+        }, [open, optionsListWidth, options, selectedItems]);
+
         const renderValue = useCallback(
             () =>
                 selectedItems.map(option => (
@@ -374,11 +384,6 @@ export const BaseSelect = forwardRef(
                             <div
                                 {...menuProps}
                                 className={cn(optionsListClassName, styles.optionsList)}
-                                style={{
-                                    [optionsListWidth === 'field'
-                                        ? 'width'
-                                        : 'minWidth']: optionsListMinWidth,
-                                }}
                             >
                                 <OptionsList
                                     {...optionsListProps}