feat(filterable-select): add disableDefaultFiltering prop #6469
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 11c9a1f:
|
src/components/select/filterable-select/filterable-select.stories.tsx
Outdated
Show resolved
Hide resolved
| @@ -753,3 +753,65 @@ export const SelectionConfirmedStory = () => { | |||
| }; | |||
|
|
|||
| SelectionConfirmedStory.parameters = { chromatic: { disableSnapshot: true } }; | |||
|
|
|||
| export const CustomFilterAndOptionStyle = () => { | |||
There was a problem hiding this comment.
Praise: this is a really good demo of what this feature can support 👏
|
Looks good, and solid reasoning for this proposal. Just the one non-blocking comment to resolve from Ed should you choose to do so then. |
stripeyjumper
dismissed stale reviews from edleeks87 and nineteen88
via
2136d69
stripeyjumper
force-pushed
the
filterable-select-disable-filtering
branch
from
f72948b to
acb7a60
Compare
| @@ -125,6 +128,7 @@ export const FilterableSelect = React.forwardRef( | |||
| inputRef, | |||
| enableVirtualScroll, | |||
| virtualScrollOverscan, | |||
| disableFiltering = false, | |||
There was a problem hiding this comment.
Can I suggest this prop name is renamed to something like disableDefaultFiltering? I was struggling to understand the purpose of this, initially thinking filtering was disabled altogether and therefore what was the purpose of this change to Filterable Select at all if no filtering was then allowed until it was explained to me.
stripeyjumper
force-pushed
the
filterable-select-disable-filtering
branch
from
63baadb to
3bd9903
Compare
stripeyjumper
force-pushed
the
filterable-select-disable-filtering
branch
from
3bd9903 to
11c9a1f
Compare
stripeyjumper
changed the title
|
🎉 This PR is included in version 125.4.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Proposed behaviour
Adds a new boolean prop to the FilterableSelect component,
disableDefaultFiltering.disableDefaultFilteringisfalse, and filtering and highlighting of options is handled by the component itself.disableDefaultFilteringis set totrue, the component does not automatically filter or highlight options as the user enters a text filter.This allows use-cases like server-side filtering of options, or rich formatting of options. Our use-case is an address search dropdown.
The new implementation uses a
FilterableSelectListby default, and aSelectListifdisableDefaultFilteringistrue. It is still appropriate to use aFilterableSelectin this case, because we still want access to the filter which is typed into the textbox.Screenshot of the storybook demo:
Current behaviour
Custom filtering and styling is not possible, because the
FilterableSelectListcomponent manipulates the childOptioncomponents as the user enters a text filter.Checklist
d.tsfile added or updated if requiredQA
Testing instructions
The following CodeSandbox is an example of the previous behaviour, where filtering breaks the option styling:
https://codesandbox.io/s/carbon-quickstart-j5pb2
You can see the new behaviour by looking at the version below:
https://codesandbox.io/p/sandbox/carbon-quickstart-typescript-forked-lr2pr9