fix(select): recalc options-list width when open (#640)

core-ds · May 18, 2021 · 1a7a3c2 · 1a7a3c2
1 parent b139c46
commit 1a7a3c2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/select/package.json b/packages/select/package.json
@@ -27,6 +27,7 @@
         "classnames": "^2.2.6",
         "downshift": "5.4.7",
         "react-merge-refs": "^1.1.0",
-        "react-virtual": "^2.2.0"
+        "react-virtual": "^2.2.0",
+        "resize-observer": "^1.0.0"
     }
 }
diff --git a/packages/select/src/Component.stories.mdx b/packages/select/src/Component.stories.mdx
@@ -33,6 +33,7 @@ export const options = [
     { key: '13', content: 'Dubnium' },
     { key: '14', content: 'Seaborgium' },
     { key: '15', content: 'Bohrium' },
+    { key: '16', content: 'Очень длинный текст Очень длинный текст Очень длинный текст' },
 ];
 
 export const groups = [
@@ -124,6 +125,7 @@ export const POSITION_OPTIONS = [
         onChange={action('change')}
         onOpen={action('open')}
         popoverPosition={selectKnob('popoverPosition', POSITION_OPTIONS, 'bottom-start')}
+        optionsListWidth={selectKnob('optionsListWidth', ['field', 'content'], 'field')}
     />
 </Story>
 

diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -9,6 +9,7 @@ import React, {
     useEffect,
     useLayoutEffect,
 } from 'react';
+import { ResizeObserver } from 'resize-observer';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Popover } from '@alfalab/core-components-popover';
@@ -283,7 +284,7 @@ export const BaseSelect = forwardRef(
             if (defaultOpen) openMenu();
         }, [defaultOpen, openMenu]);
 
-        useLayoutEffect(() => {
+        const calcOptionsListWidth = () => {
             if (listRef.current) {
                 const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
 
@@ -293,7 +294,17 @@ export const BaseSelect = forwardRef(
 
                 listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
             }
-        }, [open, optionsListWidth, options, selectedItems]);
+        };
+
+        const resizeObserver = useRef(new ResizeObserver(calcOptionsListWidth));
+
+        useEffect(() => {
+            if (!rootRef.current || !resizeObserver.current) return;
+
+            resizeObserver.current[open ? 'observe' : 'unobserve'](rootRef.current);
+        }, [open]);
+
+        useLayoutEffect(calcOptionsListWidth, [open, optionsListWidth, options, selectedItems]);
 
         const renderValue = useCallback(
             () =>