FIX Adding withForwardedRef HOC to EbaySelect (#298)

* Adding withForwardedRef HOC to EbaySelect * fixing lint issues --------- Co-authored-by: Marcial Jimenez Caballero <[email protected]>
eBay · Dec 14, 2023 · 92dd1f2 · 92dd1f2
1 parent b6c819d
commit 92dd1f2
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/ebay-select/ebay-select.tsx b/src/ebay-select/ebay-select.tsx
@@ -1,8 +1,8 @@
-import React, { ChangeEvent, cloneElement, ComponentProps, FC, useState, useRef, FocusEvent } from 'react'
+import React, { ChangeEvent, cloneElement, ComponentProps, FC, useState, FocusEvent } from 'react'
 import classNames from 'classnames'
 import EbaySelectOption from './ebay-select-option'
 import { EbayIcon } from '../ebay-icon'
-import { filterByType } from '../common/component-utils'
+import { filterByType, withForwardRef } from '../common/component-utils'
 import { useFloatingLabel } from '../common/floating-label-utils/hooks'
 import { EbayChangeEventHandler } from '../common/event-utils/types'
 
@@ -15,6 +15,7 @@ export type EbaySelectProps = Omit<ComponentProps<'select'>, 'onChange'> & {
     defaultValue?: SelectValue;
     onChange?: EbayChangeEventHandler<HTMLSelectElement, ChangeEventProps>;
     floatingLabel?: string;
+    forwardedRef?: React.Ref<HTMLSelectElement>;
     inputSize?: 'default' | 'large';
     invalid?: boolean;
 };
@@ -30,22 +31,22 @@ const EbaySelect: FC<EbaySelectProps> = ({
     onBlur = () => {},
     onFocus = () => {},
     floatingLabel,
+    forwardedRef,
     children,
     inputSize,
     invalid,
     ...rest
 }) => {
     const isFieldInvalid = invalid || rest['aria-invalid'] === 'true'
     const [value, setValue] = useState<SelectValue>(defaultValue)
-    const selectRef = useRef(null)
     const {
         label,
         Container,
         onBlur: onFloatingLabelBlur,
         onFocus: onFloatingLabelFocus,
         ref
     } = useFloatingLabel({
-        ref: selectRef,
+        ref: forwardedRef,
         inputId: rest.id,
         className: className,
         disabled: disabled,
@@ -102,7 +103,7 @@ const EbaySelect: FC<EbaySelectProps> = ({
     )
 }
 
-export default EbaySelect
+export default withForwardRef<EbaySelectProps>(EbaySelect)
 
 function optionGroups(data) {
     const optGroups = {}