From 72a95f2d05630d00a9b8803db7d17c629c4dc45f Mon Sep 17 00:00:00 2001
From: Harold Vilander <harold.vilander@selectquote.com>
Date: Tue, 6 Apr 2021 10:59:38 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Handles=20dismissal=20bet?=
 =?UTF-8?q?ter=20on=20Calendar=20Only=20Date=20picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/components/SQForm/SQFormDatePicker.js       | 17 ++++++++++++++---
 .../SQFormDatePickerWithCalendarInputOnly.js    | 12 +-----------
 stories/SQFormDialog.stories.js                 |  7 ++++++-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/SQForm/SQFormDatePicker.js b/src/components/SQForm/SQFormDatePicker.js
index 6f9baaad..a6bd65d1 100644
--- 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
index c830e787..c097ff7b 100644
--- 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
index 9f486234..112739da 100644
--- 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>
   </>