From 4dc0cfc37c5a6097b6e8591a5329d72776634909 Mon Sep 17 00:00:00 2001
From: mikebender <mikebender@deephaven.io>
Date: Wed, 3 Jul 2024 11:29:36 -0400
Subject: [PATCH] fix: Allow ComboBox to accept the FocusableRef for ref

- Wasn't allowing a ref to be passed in to ComboBox
---
 .../src/spectrum/comboBox/ComboBox.tsx        | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/spectrum/comboBox/ComboBox.tsx b/packages/components/src/spectrum/comboBox/ComboBox.tsx
index 75baff7de4..98d36cdffe 100644
--- a/packages/components/src/spectrum/comboBox/ComboBox.tsx
+++ b/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({
       }
     />
   );
-}
+});