fix: Allow ComboBox to accept the FocusableRef for ref (#2121)

- Wasn't allowing a ref to be passed in to ComboBox

Author: mofojed

packages/components/src/spectrum/comboBox/ComboBox.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   ComboBox as SpectrumComboBox,
   SpectrumComboBoxProps,
@@ -9,24 +10,19 @@ import { PickerPropsT, usePickerProps } from '../picker';
 
 export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
 
-export function ComboBox({
-  UNSAFE_className,
-  ...props
-}: ComboBoxProps): JSX.Element {
-  const {
-    defaultSelectedKey,
-    disabledKeys,
-    ref,
-    selectedKey,
-    ...comboBoxProps
-  } = usePickerProps(props);
+export const ComboBox = React.forwardRef(function ComboBox(
+  { UNSAFE_className, ...props }: ComboBoxProps,
+  ref: FocusableRef<HTMLElement>
+): JSX.Element {
+  const { defaultSelectedKey, disabledKeys, selectedKey, ...comboBoxProps } =
+    usePickerProps(props);
 
   return (
     <SpectrumComboBox
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...comboBoxProps}
       UNSAFE_className={cl('dh-combobox', UNSAFE_className)}
-      ref={ref as FocusableRef<HTMLElement>}
+      ref={ref}
       // Type assertions are necessary here since Spectrum types don't account
       // for number and boolean key values even though they are valid runtime
       // values.
@@ -41,4 +37,4 @@ export function ComboBox({
       }
     />
   );
-}
+});