fix(ComboBox): reset value on blur * 2

Author: tenphi

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

@@ -318,8 +318,8 @@ WithinFormWithLegacyFieldAndCustomValue.args = {
   allowsCustomValue: true,
 };
 
-export const WithinFormStopPropagation = TemplateFormPropagation.bind({});
-WithinFormStopPropagation.play = async ({ canvasElement }) => {
+export const WithinFormStopEnterPropagation = TemplateFormPropagation.bind({});
+WithinFormStopEnterPropagation.play = async ({ canvasElement }) => {
   const { getByTestId } = within(canvasElement);
 
   const input = getByTestId('Input');
@@ -329,3 +329,14 @@ WithinFormStopPropagation.play = async ({ canvasElement }) => {
     '{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

@@ -347,7 +347,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
             .includes(inputRef.current?.value)
         ) {
           // If the input value is not in the collection, we need to prevent the submitting of the form.
-          // This is because the input value is not a valid option and will be reset.
+          // Also, we reset value manually.
           e.preventDefault();
           props.onSelectionChange?.(null);
         }
@@ -367,6 +367,7 @@ 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 &&