feat(select): add select element ref

for forms and other controlled focus cases DSW-208
lumapps · Jun 19, 2024 · f8373f4 · f8373f4
1 parent 589309e
commit f8373f4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   `Chip`: fix forward key down event on clickable chip
 -   `TextField`: fix forward aria-describedby prop to input
 
+### Changed
+
+- `Select`, `SelectMultiple`: add `selectElementRef` prop to reference the actual input field of these components.
+
 ## [3.7.2][] - 2024-05-22
 
 ### Fixed

diff --git a/packages/lumx-react/src/components/select/Select.tsx b/packages/lumx-react/src/components/select/Select.tsx
@@ -13,6 +13,7 @@ import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -61,6 +62,7 @@ const SelectField: React.FC<SelectProps> = ({
     theme,
     value,
     variant,
+    selectElementRef,
     ...forwardedProps
 }) => {
     return (
@@ -82,7 +84,7 @@ const SelectField: React.FC<SelectProps> = ({
 
                     {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                     <div
-                        ref={anchorRef as RefObject<HTMLDivElement>}
+                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
                         id={id}
                         className={`${CLASSNAME}__wrapper`}
                         onClick={onInputClick}
@@ -145,7 +147,7 @@ const SelectField: React.FC<SelectProps> = ({
                     after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
                     onAfterClick={isEmpty ? onInputClick : onClear}
                     onClick={onInputClick}
-                    ref={anchorRef as RefObject<HTMLAnchorElement>}
+                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
                     theme={theme}
                     {...forwardedProps}
                 >

diff --git a/packages/lumx-react/src/components/select/SelectMultiple.tsx b/packages/lumx-react/src/components/select/SelectMultiple.tsx
@@ -11,6 +11,7 @@ import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -75,6 +76,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     theme,
     value,
     variant,
+    selectElementRef,
     ...forwardedProps
 }) => (
     <>
@@ -95,7 +97,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
 
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <div
-                    ref={anchorRef as RefObject<HTMLDivElement>}
+                    ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
                     id={id}
                     className={`${CLASSNAME}__wrapper`}
                     onClick={onInputClick}
@@ -150,7 +152,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                 after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
                 onAfterClick={isEmpty ? onInputClick : onClear}
                 onClick={onInputClick}
-                ref={anchorRef as RefObject<HTMLAnchorElement>}
+                ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
                 theme={theme}
                 {...forwardedProps}
             >