fix: search and filter panel no longer opens when dismissing a filter

[jmuzina]

Done

Fixes the search & filter component re-opening the filter panel when removing a filter. The component will now behave as it does in the behaviour spec

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

1. Added the dismissal event to the parameter list of the Chip component's onDismiss callback.
2. Call event.stopPropagation in the onDismiss callback 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

1. Open Search & Filter component
2. Click the component to open the filter panel.
3. Add several filters.
4. Close the filter panel by clicking outside of the component.
5. Dismiss a filter by clicking its "x" button.
6. Observe that the filter has been removed and the filter panel is still closed.

Percy steps

• No visual changes expected

Fixes

Fixes: #621

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

I think stopPropagation works well here - LGTM unless @bartaz has other thoughts.

[advl]

LGTM, thank you !

[dgtlntv]

LGTM :)

[github-actions]

🎉 This PR is included in version 1.2.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[edlerd]

Wow, this has been around for a long time. Great improvement, I like it 👍