fix(ComboBox): allow selecting by enter * 3

Author: tenphi

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -44,7 +44,7 @@ const TemplateForm: StoryFn<CubeComboBoxProps<any>> = (
     <Flow gap="2x">
       <Form
         form={form}
-        defaultValues={{ combobox: 'red' }}
+        defaultValues={{ combobox: args.allowsCustomValue ? 'Unknown' : 'red' }}
         onSubmit={(data) => console.log('! submit', data)}
       >
         <ComboBox name="combobox" {...args}>
@@ -137,8 +137,15 @@ WithinForm.play = async ({ canvasElement }) => {
   const { getByRole } = within(canvasElement);
 
   const combobox = getByRole('combobox');
-  const button = getByRole('button', { name: 'Focus' });
+  // const button = getByRole('button', { name: 'Focus' });
 
   await userEvent.click(combobox);
-  await userEvent.click(button);
+  // await userEvent.click(button);
+};
+
+export const WithinFormAllosCustomValue = TemplateForm.bind({});
+WithinFormAllosCustomValue.play = WithinForm.play;
+WithinFormAllosCustomValue.args = {
+  ...TemplateForm.args,
+  allowsCustomValue: true,
 };

src/components/fields/ComboBox/ComboBox.tsx

@@ -150,11 +150,10 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         onSelectionChange(val: string) {
           if (val != null) {
             onChange(val);
+          } else {
+            onChange(inputRef?.current?.value);
           }
         },
-        onBlur(evt) {
-          evt?.stopPropagation();
-        },
       };
     },
   });
@@ -335,10 +334,10 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   });
 
   useEffect(() => {
-    ref.current?.addEventListener('keydown', onKeyPress, true);
+    inputRef.current?.addEventListener('keydown', onKeyPress, true);
 
     return () => {
-      ref.current?.removeEventListener('keydown', onKeyPress, true);
+      inputRef.current?.removeEventListener('keydown', onKeyPress, true);
     };
   }, []);
 
@@ -359,11 +358,12 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       data-size={size}
     >
       <InputElement
+        ref={inputRef}
         qa="Input"
         autoFocus={autoFocus}
         data-autofocus={autoFocus ? '' : undefined}
         {...allInputProps}
-        ref={inputRef}
+        value={allInputProps.value || props.selectedKey}
         autoComplete={autoComplete}
         styles={inputStyles}
         {...modAttrs(mods)}