fix: 🐛 Handles dismissal better on Calendar Only Date picker

Now that SQFormDatePicker has state for open and closing the calendar; this resolves an issue with the calendar only varient not working well with the new changes. ✅ Closes: 185
SelectQuoteLabs · Apr 6, 2021 · 72a95f2 · 72a95f2
1 parent ade7086
commit 72a95f2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/components/SQForm/SQFormDatePicker.js b/src/components/SQForm/SQFormDatePicker.js
@@ -27,7 +27,8 @@ function SQFormDatePicker({
   onChange,
   setDisabledDate,
   muiFieldProps = {},
-  muiTextInputProps = {}
+  muiTextInputProps = {},
+  isCalendarOnly = false
 }) {
   const {
     formikField: {field, helpers},
@@ -59,6 +60,14 @@ function SQFormDatePicker({
   // An empty string will not reset the DatePicker so we have to pass null
   const value = field.value || null;
 
+  const handleClickTextField = () => {
+    if (isCalendarOnly) {
+      setIsCalendarOpen(!isCalendarOpen);
+    } else {
+      handleClickAway();
+    }
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <Grid item sm={size}>
@@ -86,7 +95,7 @@ function SQFormDatePicker({
                 placeholder={placeholder}
                 onBlur={handleBlur}
                 required={isRequired}
-                onClick={handleClickAway}
+                onClick={handleClickTextField}
                 classes={classes}
               />
             );
@@ -123,7 +132,9 @@ SQFormDatePicker.propTypes = {
   /** Any valid prop for material ui datepicker child component - https://material-ui.com/components/pickers/  */
   muiFieldProps: PropTypes.object,
   /** Any valid prop for MUI input field - https://material-ui.com/api/text-field/ & https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes */
-  muiTextInputProps: PropTypes.object
+  muiTextInputProps: PropTypes.object,
+  /** A Boolean flag used when using calendar only; disabled text filed input */
+  isCalendarOnly: PropTypes.bool
 };
 
 export default SQFormDatePicker;
diff --git a/src/components/SQForm/SQFormDatePickerWithCalendarInputOnly.js b/src/components/SQForm/SQFormDatePickerWithCalendarInputOnly.js
@@ -39,14 +39,7 @@ function SQFormDatePickerWithCalendarInputOnly({
   const clearButtonClasses = useClearButtonStyles();
   const calendarButtonClasses = useCalendarButtonStyles();
   const {values, setFieldValue} = useSQFormContext();
-  const [isOpen, setIsOpen] = React.useState(false);
 
-  const openCalendar = () => {
-    setIsOpen(true);
-  };
-  const closeCalendar = () => {
-    setIsOpen(false);
-  };
   const clearField = () => {
     setFieldValue(name, '');
   };
@@ -62,11 +55,9 @@ function SQFormDatePickerWithCalendarInputOnly({
       onBlur={onBlur}
       onChange={onChange}
       setDisabledDate={setDisabledDate}
+      isCalendarOnly={true}
       muiFieldProps={{
         ...muiFieldProps,
-        open: isOpen,
-        onOpen: openCalendar,
-        onClose: closeCalendar,
         InputProps: {
           startAdornment: (
             <IconButton
@@ -85,7 +76,6 @@ function SQFormDatePickerWithCalendarInputOnly({
       }}
       muiTextInputProps={{
         readOnly: true,
-        onClick: openCalendar,
         style: {cursor: isDisabled ? 'default' : 'pointer'}
       }}
     />

diff --git a/stories/SQFormDialog.stories.js b/stories/SQFormDialog.stories.js
@@ -7,7 +7,8 @@ import {
   SQFormDialog,
   SQFormDatePicker,
   SQFormTextField,
-  SQFormDateTimePicker
+  SQFormDateTimePicker,
+  SQFormDatePickerWithCalendarInputOnly
 } from '../src';
 import {createDocsPage} from './utils/createDocsPage';
 
@@ -63,6 +64,10 @@ export const sqFormDialog = () => (
       validationSchema={schema}
     >
       <SQFormDatePicker name="startDate" label="Start Date" />
+      <SQFormDatePickerWithCalendarInputOnly
+        label="Middle Date"
+        name="middleDate"
+      />
       <SQFormDatePicker name="endDate" label="End Date" />
     </SQFormDialog>
   </>