fix: search and filter panel no longer opens when dismissing a filter
Done
Fixes the search & filter component re-opening the filter panel when removing a filter.
The problem
The search & filter component has an on-click handler that opens the filter panel. This is currently being triggered by any clicks within the search and filter element and its descendants. This means that when a user clicks a chip dismissal button, the event bubbles up to the search & filter component & shows the filter panel.
Proposed solution
- Added the dismissal event to the parameter list of the
Chipcomponent'sonDismisscallback. - Call
event.stopPropagationin theonDismisscallback passed into the filter chips by the search & filter component
Another possible solution
I initially tried another solution that removed the onClick handler from the search and filter component and moved it to the onFocus callback of the search input textbox. This also solves the issue, however it loses some functionality as clicking anywhere in the search and filter no longer opens the filter panel, and the only way to open the filter panel when it is overflowed is to click the CTA. So, I abandoned this approach for the approach in this PR.
Storybook
To see rendered examples of all react-components, run:
yarn start
QA in your project
from react-components run:
yarn build
npm pack
Install the resulting tarball in your project with:
yarn add <path-to-tarball>
QA steps
- Open Search & Filter component
- Click the component to open the filter panel.
- Add several filters.
- Close the filter panel by clicking outside of the component.
- Dismiss a filter by clicking its "x" button.
- Observe that the filter has been removed and the filter panel is still closed.
Percy steps
- No visual changes expected
Fixes
Fixes: #621
LGTM, thank you !
:tada: This PR is included in version 1.2.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Wow, this has been around for a long time. Great improvement, I like it :+1: