fix(select): correct element ref passing via props

core-ds · Aug 1, 2024 · 854bbf1 · 854bbf1
1 parent 739fa5b
commit 854bbf1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
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,
     useMemo,
     useRef,
+    useState,
 } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
@@ -110,7 +111,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
         } = props;
         const shouldSearchBlurRef = useRef(true);
         const rootRef = useRef<HTMLDivElement>(null);
-        const fieldRef = useRef<HTMLInputElement>(null);
+        const [fieldRef, setFieldRef] = useState<HTMLInputElement | null>(null);
         const listRef = useRef<HTMLDivElement>(null);
         const initiatorRef = useRef<OptionShape | null>(null);
         const searchRef = useRef<HTMLInputElement>(null);
@@ -332,7 +333,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             }
         }, [openProp, openMenu, closeMenu]);
 
-        const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
+        const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, setFieldRef]) }));
         const { ref: menuRef, ...menuProps } = getMenuProps(
             { ref: listRef },
             { suppressRefError: true },
@@ -358,7 +359,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
 
         const handleFieldBlur = (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => {
             if (view === 'desktop') {
-                const isNextFocusInsideField = fieldRef.current?.contains(
+                const isNextFocusInsideField = fieldRef?.contains(
                     (event.relatedTarget || document.activeElement) as HTMLElement,
                 );
 
@@ -441,7 +442,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                     shouldSearchBlurRef.current = false;
                     searchRef.current?.blur();
                     shouldSearchBlurRef.current = true;
-                    fieldRef.current?.focus();
+                    fieldRef?.focus();
                 },
             }),
             multiple,
@@ -693,7 +694,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                     <ListPopoverDesktop
                         {...getListPopoverDesktopProps(props)}
                         open={open}
-                        fieldRef={fieldRef}
+                        popoverAnchorElement={fieldRef}
                         renderOptionsList={renderOptionsList}
                     />
                 )}

diff --git a/packages/select/src/components/base-select/components/list-desktop/list-popover-desktop.tsx b/packages/select/src/components/base-select/components/list-desktop/list-popover-desktop.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, RefObject } from 'react';
+import React, { FC, ReactNode } from 'react';
 import cn from 'classnames';
 
 import { ListPopoverDesktopRestProps } from './types/types';
@@ -7,7 +7,7 @@ import styles from '../../index.module.css';
 
 type ListPopoverDesktopProps = {
     open: boolean;
-    fieldRef: RefObject<HTMLInputElement>;
+    popoverAnchorElement: HTMLElement | null;
     renderOptionsList: () => ReactNode;
 } & ListPopoverDesktopRestProps;
 
@@ -16,7 +16,7 @@ export const ListPopoverDesktop: FC<ListPopoverDesktopProps> = (props) => {
         Popover,
         open,
         popoverProps,
-        fieldRef,
+        popoverAnchorElement,
         popoverPosition = 'bottom-start',
         preventFlip = true,
         popperClassName,
@@ -31,7 +31,7 @@ export const ListPopoverDesktop: FC<ListPopoverDesktopProps> = (props) => {
                 {...popoverProps}
                 open={open}
                 withTransition={false}
-                anchorElement={fieldRef.current as HTMLElement}
+                anchorElement={popoverAnchorElement}
                 position={popoverPosition}
                 preventFlip={preventFlip}
                 popperClassName={cn(styles.popoverInner, popperClassName)}