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

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

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({
  }
  />
  );
-}
+});