[EuiDatePickerRange] Expose the form control layout's `clear` prop
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Requestor**
Myself (@ChrisJamesC).
**Problem Statement**
`EuiDatePickerRange` has no way to render a clear button. Every other control
built on `EuiFormControlLayout` can expose one via `clear`, and the single
`EuiDatePicker` has `onClear` — but the range variant forwards neither, so
there is no way to let users reset a selected range from within the control.
**Proposed Solution**
Forward `EuiFormControlLayoutDelimited`'s existing `clear` prop through
`EuiDatePickerRange`, by adding it to the `Pick`
list the component already uses for `isLoading`, `isInvalid`, `prepend`,
`append`, and `delimiter`. No new abstraction, no new UI — it reuses
`EuiFormControlLayoutClearButton` as-is.
One open design question worth deciding here: `EuiDatePicker` exposes
`onClear` (a handler) whereas this would expose `clear` (`{ onClick }`).
Forwarding `clear` is consistent with how `EuiDatePickerRange` forwards its
other layout props; exposing `onClear` would be consistent with the sibling
single-date component. Happy to implement either — I'd defer to the team.
I previously opened #8428 with the prop-forwarding change. It was closed
after going inactive, and I understand from #9960 that community
contributions are accepted for issues labelled `help wanted` — hence this
issue rather than reopening that PR directly.
**Use Case**
Any form with an optional date range: filters, report parameters, scheduling.
Users can select a range but cannot unset it without the consuming app
building its own reset affordance outside the control, which then sits
inconsistently next to other clearable inputs on the same form.
**Value / Impact**
Value to library consumers, mainly as consistency: it closes a gap where the
date range is the odd one out among form controls. The implementation cost is
small — forwarding an existing prop — and the risk is low, since the prop is
optional and undefined by default, so existing usage renders identically.
**Urgency**
Low. Not blocking us; we render our own reset button today.
**Do alternatives or workarounds exist?**
Yes, two, both unsatisfying:
- Render a separate reset button outside the control, which looks inconsistent
next to other inputs that clear inline.
- Use `isCustom` and assemble the layout manually, which means reimplementing
what `EuiDatePickerRange` already does.
**Related code or customizations**
- Previous PR: #8428
- Closest prior issue: #5082 (a different concern — clear buttons on the inner
inputs overlapping the value at narrow widths)
**Additional context (Optional)**
If this is something the team wants and gets labelled `help wanted`, I'm happy
to open a follow-up PR addressing all the suggestions from #8428 — @weronikaolejniczak
fairly asked there for a changelog entry, a unit test for clearing, and confirmation
that the prop is available as a Storybook control. I have those done already on
a branch rebased onto current `main`, so it's ready whenever it's wanted.
Contributor guide
Research direction
Start at EuiDatePickerRange's Pick list and compare the existing clear behavior of EuiDatePicker, EuiFormControlLayoutDelimited, and EuiFormControlLayoutClearButton; review previous PR #8428 for context. Done means the range component forwards clear, with the related unit test, changelog entry, and Storybook control confirmed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 70/100