fix(Select): Hide list when reference is hidden (#917)

digdir · Oct 11, 2023 · bccea75 · bccea75
1 parent 8208f43
commit bccea75
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/packages/react/src/components/Select/OptionList/OptionList.module.css b/packages/react/src/components/Select/OptionList/OptionList.module.css
@@ -33,6 +33,10 @@
   display: none;
 }
 
+.wrapper.referenceHidden {
+  visibility: hidden;
+}
+
 .optionList {
   display: flex;
   flex-direction: column;

diff --git a/packages/react/src/components/Select/OptionList/OptionList.test.tsx b/packages/react/src/components/Select/OptionList/OptionList.test.tsx
@@ -47,6 +47,7 @@ const defaultProps: OptionListProps = {
   onOptionClick: jest.fn(),
   optionId: jest.fn(),
   options: singleSelectOptions,
+  referenceHidden: false,
   selectedValues,
   setFloating: jest.fn(),
   x: 0,

diff --git a/packages/react/src/components/Select/OptionList/OptionList.tsx b/packages/react/src/components/Select/OptionList/OptionList.tsx
@@ -15,6 +15,7 @@ type OptionListPropsBase<T extends SingleSelectOption | MultiSelectOption> = {
   onOptionClick: (value: string) => void;
   optionId: (value: string) => string;
   options: T[];
+  referenceHidden?: boolean;
   selectedValues: string[];
   setFloating: (node: HTMLElement | null) => void;
   x: number;
@@ -33,6 +34,7 @@ const OptionList = ({
   onOptionClick,
   optionId,
   options,
+  referenceHidden = false,
   selectedValues,
   setFloating,
   x,
@@ -54,6 +56,7 @@ const OptionList = ({
           classes.wrapper,
           expanded && classes.expanded,
           usingKeyboard && classes.usingKeyboard,
+          referenceHidden && classes.referenceHidden,
         )}
         ref={setFloating}
         style={{ left: x, top: y, zIndex: 1500 }}

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent } from 'react';
 import React, { useCallback, useEffect, useId, useState } from 'react';
 import cn from 'classnames';
 import { autoUpdate, useFloating } from '@floating-ui/react';
-import { flip, size } from '@floating-ui/dom';
+import { flip, size, hide } from '@floating-ui/dom';
 
 import { InputWrapper } from '../_InputWrapper';
 import { useKeyboardEventListener, usePrevious, useUpdate } from '../../hooks';
@@ -114,25 +114,28 @@ const Select = (props: SelectProps) => {
     [setKeyword, multiple],
   );
 
-  const { x, y, elements, refs } = useFloating<HTMLSpanElement>({
-    placement: 'bottom',
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      flip(),
-      size({
-        apply: ({ availableHeight, elements, rects }) => {
-          requestAnimationFrame(() => {
-            // This must be wrapped in requestAnimationFrame to avoid ResizeObserver loop error; https://github.com/floating-ui/floating-ui/issues/1740
-            // The error is difficult/impossible to reproduce in Storybook, but it appears in other apps when the component is used without a fixed width.
-            Object.assign(elements.floating.style, {
-              maxHeight: `min(${availableHeight}px, var(--option_list-max_height))`,
-              width: `${rects.reference.width}px`,
+  const { x, y, elements, refs, middlewareData } = useFloating<HTMLSpanElement>(
+    {
+      placement: 'bottom',
+      whileElementsMounted: autoUpdate,
+      middleware: [
+        flip(),
+        size({
+          apply: ({ availableHeight, elements, rects }) => {
+            requestAnimationFrame(() => {
+              // This must be wrapped in requestAnimationFrame to avoid ResizeObserver loop error; https://github.com/floating-ui/floating-ui/issues/1740
+              // The error is difficult/impossible to reproduce in Storybook, but it appears in other apps when the component is used without a fixed width.
+              Object.assign(elements.floating.style, {
+                maxHeight: `min(${availableHeight}px, var(--option_list-max_height))`,
+                width: `${rects.reference.width}px`,
+              });
             });
-          });
-        },
-      }),
-    ],
-  });
+          },
+        }),
+        hide(),
+      ],
+    },
+  );
   const listboxWrapper = elements.floating as HTMLSpanElement;
   const selectField = elements.reference as HTMLSpanElement;
 
@@ -425,6 +428,7 @@ const Select = (props: SelectProps) => {
         onOptionClick={addOrRemoveSelectedValue}
         optionId={(val) => `${givenOrRandomInputId}-${val}`}
         options={sortedOptions}
+        referenceHidden={middlewareData.hide?.referenceHidden}
         selectedValues={selectedValues}
         setFloating={refs.setFloating}
         x={x}