fix: 🐛 CalendarInputOnly clear button disabled with field

The SQFormDatePickerCalendarInputOnly field's "clear" button is now disabled if the field itself is dsiabled ✅ Closes: #154
SelectQuoteLabs · Mar 25, 2021 · 1380104 · 1380104
1 parent a69f204
commit 1380104
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/SQForm/SQFormDatePickerWithCalendarInputOnly.js b/src/components/SQForm/SQFormDatePickerWithCalendarInputOnly.js
@@ -72,7 +72,7 @@ function SQFormDatePickerWithCalendarInputOnly({
             <IconButton
               classes={clearButtonClasses}
               onClick={clearField}
-              disabled={!values[name]}
+              disabled={isDisabled || !values[name]}
             >
               <ClearIcon color="disabled" fontSize="small" />
             </IconButton>

diff --git a/stories/SQFormDatePickerWithCalendarInputOnly.stories.js b/stories/SQFormDatePickerWithCalendarInputOnly.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {withKnobs} from '@storybook/addon-knobs';
+import {withKnobs, boolean} from '@storybook/addon-knobs';
 import {withInfo} from '@storybook/addon-info';
 import * as Yup from 'yup';
 import {SQForm, SQFormDatePickerWithCalendarInputOnly} from '../src';
@@ -10,7 +10,7 @@ export default {
 };
 
 const MOCK_INITIAL_STATE = {
-  date: ''
+  date: '12/01/1990'
 };
 
 const handleSubmit = (values, actions) => {
@@ -32,7 +32,11 @@ export const basicDatePicker = () => {
       onSubmit={handleSubmit}
       validationSchema={basicSchema}
     >
-      <SQFormDatePickerWithCalendarInputOnly name="date" label="Date" />
+      <SQFormDatePickerWithCalendarInputOnly
+        name="date"
+        label="Date"
+        isDisabled={boolean('Date Picker Disabled', false)}
+      />
     </SQForm>
   );
 };