Feat/nds 253 combobox tokens #1243
Conversation
| @@ -31,7 +35,8 @@ const FieldToken = ({ label, onDismiss = noop, testId }) => { | |||
| role="button" | |||
| aria-label={`Remove ${label}`} | |||
| tabIndex={0} | |||
| onClick={() => { | |||
| onClick={(e) => { | |||
| e.stopPropagation(); | |||
There was a problem hiding this comment.
We don't want this click to bubble up to any parent, as it may trigger another event. The dismissal click should be isolated to FieldToken
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const MultiSelectItem = ({ children }) => <>{children}</>; |
There was a problem hiding this comment.
This component gathers information about items so we can have an interface like this:
<MultiSelect>
<MultiSelect.Item>My item jsx</MultiSelect.Item>
</MultiSelect>Instead of accepting a big data structure like this: <MultiSelect options={{ ...bigJsObject }} />.
I'm exposing this Thing.Item style of interface for two reasons:
- This would be consistent with other components, like
SelectandTabs - This gives consumers full control over what gets rendered in each item
| role="option" | ||
| aria-selected={isSelected(selectedItems, item).toString()} |
There was a problem hiding this comment.
When using a useMultiSelect in combination with a useSelect, we get the incorrect aria-selected value on items in the listbox. Here I'm just overriding what the prop getter returns, using my own helper to determine if the item is selected or not.
The role prop is only needed here to expose the linter to it (it's otherwise added by getItemProps)
📘 Storybook Preview Available 👀View the Storybook build from this PR in your browser: (This action will publish a new comment and url if this PR is modified) |
|
🎉 This PR is included in version 3.37.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
DropdownTriggerto accept start and end content (useful for managing tokens)MultiSelectcomponentFieldTokencomponent, so it works within a dropdown triggeruseMultipleSelectionThis hook from downshift is a state manager for more than one
selectedItem, becauseuseSelectonly manages a singleselectedItem.I'm using state reducers in both hooks to control the behavior we want when users interact with the options list OR the chips in the dropdown trigger.