[EuiSuperDatePicker] Fix toggling isQuickSelectOnly triggering a full re-render when using absolute dates #8810
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…re-render when using absolute dates
mgadewoll
requested changes
Jun 25, 2025
packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
Show resolved
Hide resolved
…ble props - updates startControl/endControl to be optional to support unsetting them; additionally uses delimiter prop with empty string to unset it as well
acstll
approved these changes
Jun 27, 2025
Contributor
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
🟢 Tested the changes locally, everything working as expected. Added a small suggestion regarding the new story.
@kowalczyk-krzysztof thanks again for pushing this forward!
packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
Show resolved
Hide resolved
…Only control takes effect
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
mgadewoll
approved these changes
Jun 27, 2025
tkajtoch
added a commit
to elastic/kibana
that referenced
this pull request
Jul 2, 2025
`104.0.2` ⏩ `104.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v104.1.0`](https://github.com/elastic/eui/releases/v104.1.0) - Added new component token `components.forms.codeInlineBackground` ([#8813](elastic/eui#8813)) - Updated background color for `EuiCode` to use `components.forms.codeInlineBackground` ([#8813](elastic/eui#8813)) - Added `noItemsMessage` prop to `EuiInMemoryTable` ([#8812](elastic/eui#8812)) - Added prop `delimiter` on `EuiDatePickerRange` ([#8810](elastic/eui#8810)) **Bug fixes** - Fixed an issue with `EuiSuperDatePicker` where toggling `isQuickSelectOnly` would cause a full re-render when the selected range uses absolute dates ([#8810](elastic/eui#8810)) **Deprecations** - Deprecated `message` prop in `EuiInMemoryTable` in favor of `noItemsMessage` which is a more meaningful prop name; there are no functional changes ([#8812](elastic/eui#8812)) ### `@elastic/eui-theme-borealis` #### [`v3.1.0`](https://github.com/elastic/eui/releases/v3.1.0) - Added new component token `components.forms.codeInlineBackground` ([#8813](elastic/eui#8813))
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
`104.0.2` ⏩ `104.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v104.1.0`](https://github.com/elastic/eui/releases/v104.1.0) - Added new component token `components.forms.codeInlineBackground` ([elastic#8813](elastic/eui#8813)) - Updated background color for `EuiCode` to use `components.forms.codeInlineBackground` ([elastic#8813](elastic/eui#8813)) - Added `noItemsMessage` prop to `EuiInMemoryTable` ([elastic#8812](elastic/eui#8812)) - Added prop `delimiter` on `EuiDatePickerRange` ([elastic#8810](elastic/eui#8810)) **Bug fixes** - Fixed an issue with `EuiSuperDatePicker` where toggling `isQuickSelectOnly` would cause a full re-render when the selected range uses absolute dates ([elastic#8810](elastic/eui#8810)) **Deprecations** - Deprecated `message` prop in `EuiInMemoryTable` in favor of `noItemsMessage` which is a more meaningful prop name; there are no functional changes ([elastic#8812](elastic/eui#8812)) ### `@elastic/eui-theme-borealis` #### [`v3.1.0`](https://github.com/elastic/eui/releases/v3.1.0) - Added new component token `components.forms.codeInlineBackground` ([elastic#8813](elastic/eui#8813))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Closes #8689
This PR fixes an issue with
EuiSuperDatePickerwhere togglingisQuickSelectOnlytriggers a full re-render when the selected range uses absolute dates.Demo of the fix: https://codesandbox.io/p/sandbox/elastic-carson-2mwxrl
Why are we making this change?
To fix a bug where the quick select popover closes after toggling
isQuickSelectOnlywhich results in users having to click the quick select button two times.Screenshots
Before:
before.mov
After:
after.mov
Impact to users
The are no visual changes. This PR simply changes how
isQuickSelectOnlyworks.QA
Remove or strikethrough items that do not apply to your PR.
General checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modes(emulate forced colors if you do not have access to a Windows machine.)Checked in mobileChecked in Chrome, Safari, Edge, and FirefoxChecked for accessibility including keyboard-only and screenreader modesAdded documentation@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesIf applicable, added the breaking change issue label (and filled out the breaking change checklist)If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)