Prevent DateInput component from triggering form submissions (#2772)

sumup-oss · Nov 12, 2024 · d91ddee · d91ddee
1 parent eb08159
commit d91ddee
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/.changeset/weak-kings-refuse.md b/.changeset/weak-kings-refuse.md
@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': patch
+---
+
+Added `type="button"` to all `button` elements in the Calendar and DateInput components to prevent them from triggering form submissions.
diff --git a/packages/circuit-ui/components/Calendar/Calendar.module.css b/packages/circuit-ui/components/Calendar/Calendar.module.css
@@ -81,9 +81,6 @@
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
-  font-size: var(--cui-body-m-font-size);
-  font-weight: var(--cui-font-weight-bold);
-  line-height: var(--cui-body-m-line-height);
 }
 
 .day {

diff --git a/packages/circuit-ui/components/Calendar/Calendar.tsx b/packages/circuit-ui/components/Calendar/Calendar.tsx
@@ -49,6 +49,7 @@ import {
 import { applyMultipleRefs } from '../../util/refs.js';
 import { useSwipe } from '../../hooks/useSwipe/useSwipe.js';
 import { last } from '../../util/helpers.js';
+import { Body } from '../Body/Body.js';
 
 import {
   CalendarActionType,
@@ -287,6 +288,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
         <div className={classes.header}>
           <div className={classes.prev}>
             <IconButton
+              type="button"
               icon={ArrowLeft}
               size="s"
               variant="tertiary"
@@ -300,6 +302,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
           </div>
           <div className={classes.next}>
             <IconButton
+              type="button"
               icon={ArrowRight}
               size="s"
               variant="tertiary"
@@ -410,9 +413,14 @@ function Month({
             {weekdays.map((weekday) => (
               <th key={weekday.long} scope="col">
                 <span className={utilClasses.hideVisually}>{weekday.long}</span>
-                <span aria-hidden="true" className={classes.weekday}>
+                <Body
+                  as="span"
+                  weight="semibold"
+                  aria-hidden="true"
+                  className={classes.weekday}
+                >
                   {weekday.narrow}
-                </span>
+                </Body>
               </th>
             ))}
           </tr>
@@ -466,6 +474,7 @@ function Month({
                 return (
                   <td key={isoDate}>
                     <button
+                      type="button"
                       data-date={isoDate}
                       onClick={handleClick}
                       onMouseEnter={handleMouseEnter}

diff --git a/packages/circuit-ui/components/DateInput/DateInput.spec.tsx b/packages/circuit-ui/components/DateInput/DateInput.spec.tsx
@@ -348,6 +348,9 @@ describe('DateInput', () => {
       const openCalendarButton = screen.getByRole('button', {
         name: /change date/i,
       });
+
+      expect(openCalendarButton).toHaveAttribute('type', 'button');
+
       await userEvent.click(openCalendarButton);
 
       const calendarDialog = screen.getByRole('dialog');

diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx
@@ -453,6 +453,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
               })}
             </div>
             <IconButton
+              type="button"
               icon={CalendarIcon}
               variant="secondary"
               onClick={openCalendar}
@@ -515,11 +516,16 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
               {(!required || isMobile) && (
                 <div className={classes.buttons}>
                   {!required && (
-                    <Button variant="tertiary" onClick={handleClear}>
+                    <Button
+                      type="button"
+                      variant="tertiary"
+                      onClick={handleClear}
+                    >
                       {clearDateButtonLabel}
                     </Button>
                   )}
                   <Button
+                    type="button"
                     variant="primary"
                     onClick={handleApply}
                     className={classes.apply}