fix(ComboBox): reset value on enter (#629)

Author: tenphi

.changeset/tough-pumpkins-sniff.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Reset the value of the ComboBox on Enter press if it's not an option and custom input is not allowed.

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

@@ -89,6 +89,59 @@ const TemplateForm: StoryFn<CubeComboBoxProps<any>> = (
   );
 };
 
+const TemplateFormPropagation: StoryFn<CubeComboBoxProps<any>> = (
+  args: CubeComboBoxProps<any>,
+) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Flow gap="2x">
+      <Form
+        form={form}
+        defaultValues={{ combobox: args.allowsCustomValue ? 'unknown' : 'red' }}
+        onSubmit={(data) => console.log('! submit', data)}
+      >
+        <ComboBox
+          name="combobox"
+          {...args}
+          rules={[
+            {
+              required: true,
+            },
+            {
+              pattern: /^[A-Za-z_][A-Za-z0-9_]*$/,
+              message: 'Please enter valid variable name',
+            },
+          ]}
+        >
+          <ComboBox.Item key="red">
+            {args.allowsCustomValue ? 'red' : 'Red'}
+          </ComboBox.Item>
+          <ComboBox.Item key="orange">
+            {args.allowsCustomValue ? 'orange' : 'Orange'}
+          </ComboBox.Item>
+          <ComboBox.Item key="yellow">
+            {args.allowsCustomValue ? 'yellow' : 'Yellow'}
+          </ComboBox.Item>
+          <ComboBox.Item key="green">
+            {args.allowsCustomValue ? 'green' : 'Green'}
+          </ComboBox.Item>
+          <ComboBox.Item key="blue">
+            {args.allowsCustomValue ? 'blue' : 'Blue'}
+          </ComboBox.Item>
+          <ComboBox.Item key="purple">
+            {args.allowsCustomValue ? 'purple' : 'Purple'}
+          </ComboBox.Item>
+          <ComboBox.Item key="violet">
+            {args.allowsCustomValue ? 'violet' : 'Violet'}
+          </ComboBox.Item>
+        </ComboBox>
+        <Form.Submit>Submit</Form.Submit>
+      </Form>
+    </Flow>
+  );
+};
+
 const TemplateLegacyForm: StoryFn<CubeComboBoxProps<any>> = (
   args: CubeComboBoxProps<any>,
 ) => {
@@ -264,3 +317,26 @@ WithinFormWithLegacyFieldAndCustomValue.args = {
   ...TemplateForm.args,
   allowsCustomValue: true,
 };
+
+export const WithinFormStopEnterPropagation = TemplateFormPropagation.bind({});
+WithinFormStopEnterPropagation.play = async ({ canvasElement }) => {
+  const { getByTestId } = within(canvasElement);
+
+  const input = getByTestId('Input');
+
+  await userEvent.type(
+    input,
+    '{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}blurring{enter}',
+  );
+};
+
+export const WithinFormStopBlurPropagation = TemplateFormPropagation.bind({});
+WithinFormStopBlurPropagation.play = async ({ canvasElement }) => {
+  const { getByTestId } = within(canvasElement);
+
+  const input = getByTestId('Input');
+
+  await userEvent.type(input, '!');
+  const button = getByTestId('Button');
+  await userEvent.click(button);
+};

src/components/fields/ComboBox/ComboBox.tsx

@@ -330,14 +330,26 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   // If input is not full and the user presses Enter, pick the first option.
   let onKeyPress = useEvent((e: KeyboardEvent) => {
     if (e.key === 'Enter') {
-      if (!props.allowsCustomValue && state.isOpen) {
-        const option = [...state.collection][0]?.key;
+      if (!props.allowsCustomValue) {
+        if (state.isOpen) {
+          const option = [...state.collection][0]?.key;
 
-        if (option && selectedKey !== option) {
-          props.onSelectionChange?.(option);
+          if (option && selectedKey !== option) {
+            props.onSelectionChange?.(option);
 
-          e.stopPropagation();
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        } else if (
+          inputRef.current?.value &&
+          ![...state.collection]
+            .map((i) => i.textValue)
+            .includes(inputRef.current?.value)
+        ) {
+          // If the input value is not in the collection, we need to prevent the submitting of the form.
+          // Also, we reset value manually.
           e.preventDefault();
+          props.onSelectionChange?.(null);
         }
         // If a custom value is allowed, we need to check if the input value is in the collection.
       } else if (props.allowsCustomValue) {
@@ -354,11 +366,26 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     }
   });
 
+  let onBlur = useEvent((e: FocusEvent) => {
+    // If the input value is not in the collection, we need to reset the value.
+    if (
+      !props.allowsCustomValue &&
+      inputRef.current?.value &&
+      ![...state.collection]
+        .map((i) => i.textValue)
+        .includes(inputRef.current?.value)
+    ) {
+      props.onSelectionChange?.(null);
+    }
+  });
+
   useEffect(() => {
     inputRef.current?.addEventListener('keydown', onKeyPress, true);
+    inputRef.current?.addEventListener('blur', onBlur, true);
 
     return () => {
       inputRef.current?.removeEventListener('keydown', onKeyPress, true);
+      inputRef.current?.removeEventListener('blur', onBlur, true);
     };
   }, []);