🐛(react) fix Select submit button

As the default type of button is "submit", when including a Select inside a form, clicking on any of its button was triggering form submission.
openfun · Feb 12, 2024 · f16eed9 · f16eed9
1 parent e79768c
commit f16eed9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/hungry-knives-rescue.md b/.changeset/hungry-knives-rescue.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix Select submit button
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -145,6 +145,7 @@ export const SelectMonoAux = ({
                         e.stopPropagation();
                       }}
                       icon={<span className="material-icons">close</span>}
+                      type="button"
                     />
                     <div className="c__select__inner__actions__separator" />
                   </>
@@ -164,6 +165,7 @@ export const SelectMonoAux = ({
                     </span>
                   }
                   disabled={disabled}
+                  type="button"
                   {...downshiftReturn.toggleButtonProps}
                 />
               </div>

diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -125,6 +125,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                           props.onSelectedItemsChange([]);
                         }}
                         icon={<span className="material-icons">close</span>}
+                        type="button"
                       />
                       <div className="c__select__inner__actions__separator" />
                     </>
@@ -143,6 +144,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                     </span>
                   }
                   disabled={props.disabled}
+                  type="button"
                 />
               </div>
               <div className="c__select__inner__value">