From 995c1857bdcc004fa0a76ecb7ebf6737a8fbdb73 Mon Sep 17 00:00:00 2001
From: Arthur Denner <arthurdenner7@gmail.com>
Date: Fri, 11 Nov 2022 15:28:30 +0100
Subject: [PATCH] fix(datepicker): add type=button to all buttons (#807)

* fix(datepicker): add type=button to all buttons

* fix(datepicker): show calendar on custom icon click

* chore: update pull request template

* chore: configure ESLint to prevent non-button types of button

* chore: apply ESLint rule to buttons in stories
---
 .eslintrc.js                         |  1 +
 .github/PULL_REQUEST_TEMPLATE.md     |  8 ++------
 src/components/button.tsx            |  2 +-
 src/components/calendar/calendar.tsx |  8 ++++++--
 src/components/cell/cell.tsx         |  7 ++++++-
 src/components/icon.tsx              |  3 +++
 src/components/input.tsx             |  1 +
 src/components/today-button.tsx      |  1 +
 stories/index.stories.tsx            | 12 ++++++++++--
 9 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2c967723..22fd91c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,5 +2,6 @@ module.exports = {
   extends: ['react-app', 'prettier', 'plugin:prettier/recommended'],
   rules: {
     '@typescript-eslint/consistent-type-assertions': 0,
+    'react/button-has-type': [2, { submit: false, reset: false }],
   },
 };
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index e4abfbc0..41331302 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,8 +1,3 @@
-<!--
-Make sure you've read the CONTRIBUTING.md file.
-Fill out the information to help the review and merge of your pull request!
--->
-
 **What kind of change does this PR introduce?**
 <!-- You can also link to an open issue here -->
 
@@ -19,4 +14,5 @@ Fill out the information to help the review and merge of your pull request!
 - [ ] Tests
 - [ ] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
 
-<!-- Feel free to add additional comments -->
\ No newline at end of file
+<!-- Make sure you've read the CONTRIBUTING.md file too -->
+<!-- Feel free to add additional comments -->
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 8f98f140..00e3e283 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonProps } from 'semantic-ui-react';
 
 const CustomButton = ({ icon, ...otherProps }: ButtonProps) => (
-  <Button basic compact icon={icon} {...otherProps} />
+  <Button basic compact icon={icon} type="button" {...otherProps} />
 );
 
 export default CustomButton;
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 073f7251..65aa6587 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -102,6 +102,7 @@ const Calendar: React.FC<CalendarProps> = ({
                         icon="angle double left"
                         inverted={inverted}
                         title={previousYear}
+                        type="button"
                         {...getBackProps({
                           calendars,
                           'aria-label': previousYear,
@@ -114,6 +115,7 @@ const Calendar: React.FC<CalendarProps> = ({
                         inverted={inverted}
                         style={{ marginRight: 0 }}
                         title={previousMonth}
+                        type="button"
                         {...getBackProps({
                           calendars,
                           'aria-label': previousMonth,
@@ -135,6 +137,7 @@ const Calendar: React.FC<CalendarProps> = ({
                         icon="angle right"
                         inverted={inverted}
                         title={nextMonth}
+                        type="button"
                         {...getForwardProps({
                           calendars,
                           'aria-label': nextMonth,
@@ -146,6 +149,7 @@ const Calendar: React.FC<CalendarProps> = ({
                         inverted={inverted}
                         style={{ marginRight: 0 }}
                         title={nextYear}
+                        type="button"
                         {...getForwardProps({
                           calendars,
                           'aria-label': nextYear,
@@ -201,7 +205,7 @@ const Calendar: React.FC<CalendarProps> = ({
             </div>
           ))}
         </div>
-        {showToday && (
+        {showToday ? (
           <TodayButton
             inverted={inverted}
             {...getToday(minDate, maxDate)}
@@ -212,7 +216,7 @@ const Calendar: React.FC<CalendarProps> = ({
           >
             {todayButton}
           </TodayButton>
-        )}
+        ) : null}
       </Segment>
     </Ref>
   );
diff --git a/src/components/cell/cell.tsx b/src/components/cell/cell.tsx
index c6391ab3..9ae50e6f 100644
--- a/src/components/cell/cell.tsx
+++ b/src/components/cell/cell.tsx
@@ -48,7 +48,12 @@ const CalendarCell = ({
   }
 
   return (
-    <button className={className} disabled={!selectable} {...otherProps}>
+    <button
+      className={className}
+      disabled={!selectable}
+      type="button"
+      {...otherProps}
+    >
       {children}
     </button>
   );
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index a633f080..82ce725b 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -7,6 +7,7 @@ type CustomIconProps = {
   icon: SemanticDatepickerProps['icon'];
   isClearIconVisible: boolean;
   onClear: () => void;
+  onClick: () => void;
 };
 
 const CustomIcon = ({
@@ -14,6 +15,7 @@ const CustomIcon = ({
   icon,
   isClearIconVisible,
   onClear,
+  onClick,
 }: CustomIconProps) => {
   if (isClearIconVisible && clearIcon && React.isValidElement(clearIcon)) {
     return React.cloneElement<any>(clearIcon, {
@@ -37,6 +39,7 @@ const CustomIcon = ({
   if (icon && React.isValidElement(icon)) {
     return React.cloneElement<any>(icon, {
       'data-testid': 'datepicker-icon',
+      onClick,
     });
   }
 
diff --git a/src/components/input.tsx b/src/components/input.tsx
index fcd9f8ce..0f4e1ab4 100644
--- a/src/components/input.tsx
+++ b/src/components/input.tsx
@@ -46,6 +46,7 @@ const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
             icon={icon}
             isClearIconVisible={isClearIconVisible}
             onClear={onClear}
+            onClick={onFocus}
           />
         }
         input={inputData}
diff --git a/src/components/today-button.tsx b/src/components/today-button.tsx
index a502a4cf..85f1da7b 100644
--- a/src/components/today-button.tsx
+++ b/src/components/today-button.tsx
@@ -32,6 +32,7 @@ const TodayButton: React.FC<TodayButtonProps> = ({
     data-testid="datepicker-today-button"
     fluid
     style={style}
+    type="button"
     {...otherProps}
   >
     {children}
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
index 9ea31c00..6ae7d6b7 100644
--- a/stories/index.stories.tsx
+++ b/stories/index.stories.tsx
@@ -94,8 +94,16 @@ export const withCustomIcons = () => {
   const clearIcon = select('Clear icon (with value)', iconMap, iconMap.close);
   const useCustomIcon = boolean('Custom icon', false);
   const useCustomClearIcon = boolean('Custom clear icon', false);
-  const CustomIcon = (props: any) => <button {...props}>Select</button>;
-  const CustomClearIcon = (props: any) => <button {...props}>Reset</button>;
+  const CustomIcon = (props: any) => (
+    <button type="button" {...props}>
+      Select
+    </button>
+  );
+  const CustomClearIcon = (props: any) => (
+    <button type="button" {...props}>
+      Reset
+    </button>
+  );
   const x = useCustomIcon ? ((<CustomIcon />) as unknown) : icon;
   const y = useCustomClearIcon ? ((<CustomClearIcon />) as unknown) : clearIcon;