feat(select-fields): add a prevent default on enter key press

p3ol · Sep 11, 2024 · 81dbb30 · 81dbb30
1 parent 57df715
commit 81dbb30
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/react/lib/SelectField/index.stories.tsx b/packages/react/lib/SelectField/index.stories.tsx
@@ -147,6 +147,7 @@ export const withOnlyArbitraryValues = () => (
     placeholder="Type a name"
     allowArbitraryItems={true}
     multiple={true}
+    noOptionsEnabled={false}
   />
 );
 
@@ -171,3 +172,25 @@ export const noEmpty = () => (
     animateMenu={slideInDownMenu}
   />
 );
+
+export const onAForm = () => {
+  const ref = useRef<SelectFieldRef>(null);
+  const actions = action('submitted');
+
+  return (
+    <form
+      onSubmit={e => {
+        actions({ name: 'submitted', event: e });
+        e.preventDefault();
+      }}
+    >
+      <SelectField
+        ref={ref}
+        allowArbitraryItems={true}
+        multiple={true}
+        noOptionsEnabled={false}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
diff --git a/packages/react/lib/SelectField/index.tsx b/packages/react/lib/SelectField/index.tsx
@@ -366,6 +366,8 @@ const SelectField = forwardRef<SelectFieldRef, SelectFieldProps>(({
 
     switch (e.key) {
       case 'Enter':
+        e.preventDefault();
+
         if (allowArbitraryItems) {
           onSelectOption(state.search, { resetSearch: true });
         }