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

@@ -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 }],
   },
 };

.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 -->
+<!-- Make sure you've read the CONTRIBUTING.md file too -->
+<!-- Feel free to add additional comments -->

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;

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>
   );

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>
   );

src/components/icon.tsx

@@ -7,13 +7,15 @@ type CustomIconProps = {
   icon: SemanticDatepickerProps['icon'];
   isClearIconVisible: boolean;
   onClear: () => void;
+  onClick: () => void;
 };
 
 const CustomIcon = ({
   clearIcon,
   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,
     });
   }
 

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}

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}

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;