[EuiSelectable] Add the single triggering option as a parameter to onChange
#6487
Conversation
| onChange={(newOptions, event, changedOption) => { | ||
| setOptions(newOptions); | ||
| console.log({ newOptions, event, changedOption }); |
There was a problem hiding this comment.
@Heenawter Please let us know if this satisfies your use case. You can examine the output of changedOption at https://eui.elastic.co/pr_6487/#/forms/selectable#options-can-be-excluded (once staging is done spinning up in ~30 mins or so).
The returned changedOption should be the option obj that was clicked/toggled, with the checked status updated (either 'on', 'off', or undefined). Its various values should be present in this object.
There was a problem hiding this comment.
@constancecchen This is amazing, thank you so much! I tested it out, and it looks like it's doing exactly what we would need! 🎉
| event: EuiSelectableOnChangeEvent | ||
| ) => { | ||
| const { onOptionClick, options, singleSelection } = this.props; | ||
| let changedOption = { ...addedOption }; |
There was a problem hiding this comment.
Minor technical note/aside: cloning addedOption via spread operator is likely unnecessary here, but I wanted to be very careful not to mutate the option objects being passed to us by consumers no matter what, so this does the same thing const updatedOption = { ...option }; is doing below, just in case
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6487/ |
1Copenut
left a comment
1Copenut
left a comment
There was a problem hiding this comment.
👍 LGTM! Spot tested keyboard and screen readers locally.
This reverts commit 7346ee4.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6487/ |
## Summary `[email protected]` ⏩ `[email protected]` --- ## [`72.0.0`](https://github.com/elastic/eui/tree/v72.0.0) - Added the `customQuickSelectRender` render prop to `EuiSuperDatePicker`, which allows customizing the Quick Select popover ([#6382](elastic/eui#6382)) - `EuiFilePicker` styles have been updated to look more like an interactive element. ([#6479](elastic/eui#6479)) - Added a third argument to `EuiSelectable`'s `onChange` callback. The single `option` object that triggered the `onChange` event is now also passed to consumers with its most recent `checked` state ([#6487](elastic/eui#6487)) **Bug fixes** - `EuiTabs` now passes `size` and `expand` to all children using a React context provider. ([#6478](elastic/eui#6478)) - Fixed security warnings caused by `[email protected]` sub-dependency ([#6482](elastic/eui#6482)) **Breaking changes** - Removed `size` and `expand` props from `EuiTab` ([#6478](elastic/eui#6478)) ## [`71.1.0`](https://github.com/elastic/eui/tree/v71.1.0) **Deprecations** - Renamed `EuiPageSideBarProps` to `EuiPageSideBarProps_Deprecated`, to reduce usage/confusion with `EuiPageSidebar` ([#6468](elastic/eui#6468)) Co-authored-by: Kibana Machine <[email protected]>
4 participants
Summary
closes #6485
@Heenawter's team has a fairly custom include/exclude usage of
EuiSelectablewhere they want to be able to quickly grab the triggeringoptionwithout having to scrub through the event or the entireoptionsarray to figure out what changed.This is an extremely reasonable request, just IMO, and is also a very quick add onto the existing
onChangecallback.QA
changedOptionparameter logged to your console on every option click/press, and that the option correctly reflects both the values andcheckedstate of the toggled optionGeneral checklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Updated the Figma library counterpart