fix(DatePicker): error not showing on date reset by button (#9267)

* fix(DatePicker): clear error on date reset

* feat(DatePicker): add clear date example to controlled DatePicker

* test(DatePicker): add integration test for clear date

* feat(DatePicker): update clear date logic based on #9373

* fix(DatePicker): hide error when date cleared and not required + show error when cleared and required

* refactor(DatePicker)

* fix(DatePicker): prop removal

packages/react-core/src/components/DatePicker/DatePicker.tsx

@@ -129,11 +129,13 @@ const DatePickerBase = (
   const [popoverOpen, setPopoverOpen] = React.useState(false);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const [pristine, setPristine] = React.useState(true);
+  const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
   const triggerRef = React.useRef<HTMLDivElement>();
+  const dateIsRequired = requiredDateOptions?.isRequired || false;
   const emptyDateText = requiredDateOptions?.emptyDateText || 'Date cannot be blank';
 
   React.useEffect(() => {
@@ -147,6 +149,9 @@ const DatePickerBase = (
     if (errorText && isValidDate(newValueDate)) {
       setError(newValueDate);
     }
+    if (value === '' && !pristine && !textInputFocused) {
+      dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
+    }
   }, [value]);
 
   const setError = (date: Date) => {
@@ -166,6 +171,7 @@ const DatePickerBase = (
   };
 
   const onInputBlur = (event: any) => {
+    setTextInputFocused(false);
     const newValueDate = dateParse(value);
     const dateIsValid = isValidDate(newValueDate);
     const onBlurDateArg = dateIsValid ? new Date(newValueDate) : undefined;
@@ -288,6 +294,7 @@ const DatePickerBase = (
                 value={value}
                 onChange={onTextInput}
                 onBlur={onInputBlur}
+                onFocus={() => setTextInputFocused(true)}
                 onKeyPress={onKeyPress}
                 {...inputProps}
               />

packages/react-core/src/components/DatePicker/examples/DatePicker.md

@@ -56,6 +56,12 @@ The error message can be customized via the `requiredDateOptions.emptyDateText`
 
 ```
 
+### Controlled required
+
+```ts file="./DatePickerControlledRequired.tsx"
+
+```
+
 ### Controlling the date picker calendar state
 
 ```ts file="./DatePickerControlledCalendar.tsx"

packages/react-core/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, DatePicker } from '@patternfly/react-core';
+import { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';
 
 export const DatePickerControlled: React.FunctionComponent = () => {
   const initialValue = '2020-03-17';
@@ -9,7 +9,14 @@ export const DatePickerControlled: React.FunctionComponent = () => {
       <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
       <br />
       <br />
-      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+      <Flex>
+        <FlexItem>
+          <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+        </FlexItem>
+        <FlexItem>
+          <Button onClick={() => setValue('')}>Clear date</Button>
+        </FlexItem>
+      </Flex>
     </React.Fragment>
   );
 };

packages/react-core/src/components/DatePicker/examples/DatePickerControlledRequired.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DatePickerControlled: React.FunctionComponent = () => {
+  const initialValue = '2020-03-17';
+  const [value, setValue] = React.useState(initialValue);
+  return (
+    <React.Fragment>
+      <DatePicker
+        requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+      />
+      <br />
+      <br />
+      <Flex>
+        <FlexItem>
+          <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+        </FlexItem>
+        <FlexItem>
+          <Button onClick={() => setValue('')}>Clear date</Button>
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  );
+};

packages/react-integration/cypress/integration/datepicker.spec.ts

@@ -18,6 +18,15 @@ xit('Verify validation error can be cleared from outside', () => {
   cy.get('div.pf-m-error').should('not.exist');
 });
 
+it('Verify error can be cleared when resetting the date from outside', () => {
+  cy.get('#date-picker-clear .pf-v5-c-form-control input').click();
+  cy.focused().clear().type('something invalid');
+  cy.focused().blur();
+  cy.get('div.pf-m-error').should('exist');
+  cy.get('button').contains('Clear date').click();
+  cy.get('div.pf-m-error').should('not.exist');
+});
+
 it('Verify calendar state can be controlled', () => {
   cy.get('#date-picker-controlled .pf-v5-c-popover').should('not.exist');
   cy.get('button').contains('Toggle').click();

packages/react-integration/demo-app-ts/src/components/demos/DatePickerDemo/DatePickerDemo.tsx

@@ -14,6 +14,12 @@ export const DatePickerDemo = () => {
 
   return (
     <>
+      <div id="date-picker-clear">
+        <DatePicker value={value} />
+        <div>
+          <button onClick={() => setValue('')}>Clear date</button>
+        </div>
+      </div>
       <div id="date-picker-validator">
         <DatePicker value={value} onChange={(event, value) => setValue(value)} validators={[rangeValidator]} />
         <div>