From 8bcab2a9a2bb775401ed2c147f113d077b7ab33d Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 13 Sep 2024 00:07:37 -0700
Subject: [PATCH] [EuiDatePicker] Fix clear button appearing when input is
 disabled (#8020)

---
 packages/eui/changelogs/upcoming/8020.md      |  3 +++
 .../date_picker/date_picker.test.tsx          | 19 +++++++++++++++++++
 .../components/date_picker/date_picker.tsx    |  4 +++-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/eui/changelogs/upcoming/8020.md

diff --git a/packages/eui/changelogs/upcoming/8020.md b/packages/eui/changelogs/upcoming/8020.md
new file mode 100644
index 00000000000..9547fb5ab0d
--- /dev/null
+++ b/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`
diff --git a/packages/eui/src/components/date_picker/date_picker.test.tsx b/packages/eui/src/components/date_picker/date_picker.test.tsx
index 4897860527e..63af2d48d98 100644
--- a/packages/eui/src/components/date_picker/date_picker.test.tsx
+++ b/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
diff --git a/packages/eui/src/components/date_picker/date_picker.tsx b/packages/eui/src/components/date_picker/date_picker.tsx
index a88ea36a0f8..01b58569c86 100644
--- a/packages/eui/src/components/date_picker/date_picker.tsx
+++ b/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}