[EuiDatePicker] Fix clear button appearing when input is disabled (#8020

)

packages/eui/changelogs/upcoming/8020.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiDatePicker`'s `onClear` button to not appear when the input is `disabled`

packages/eui/src/components/date_picker/date_picker.test.tsx

@@ -47,6 +47,25 @@ describe('EuiDatePicker', () => {
     jest.restoreAllMocks();
   });
 
+  test('onClear', () => {
+    const onClear = () => {};
+    const selected = moment();
+
+    const { queryByLabelText, rerender } = render(
+      <EuiDatePicker onClear={onClear} selected={selected} />
+    );
+    // Should render the clear button
+    expect(queryByLabelText('Clear input')).toBeInTheDocument();
+
+    // Should not render the clear button if the input is disabled
+    rerender(<EuiDatePicker onClear={onClear} selected={selected} disabled />);
+    expect(queryByLabelText('Clear input')).not.toBeInTheDocument();
+
+    // Should not render the clear button if no date is selected
+    rerender(<EuiDatePicker onClear={onClear} />);
+    expect(queryByLabelText('Clear input')).not.toBeInTheDocument();
+  });
+
   test('compressed', () => {
     const { container } = render(<EuiDatePicker compressed />);
     // TODO: Should probably be a visual snapshot test

packages/eui/src/components/date_picker/date_picker.tsx

@@ -320,7 +320,9 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     <span css={cssStyles} className={classes}>
       <EuiFormControlLayout
         icon={optionalIcon}
-        clear={selected && onClear ? { onClick: onClear } : undefined}
+        clear={
+          selected && !disabled && onClear ? { onClick: onClear } : undefined
+        }
         isLoading={isLoading}
         isInvalid={isInvalid}
         isDisabled={disabled}