search

canonical / react-components

A set of components based on Vanilla Framework
https://canonical.github.io/react-components
99 stars 55 forks source link

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

Closed jmuzina closed 3 weeks ago

jmuzina commented 4 months ago

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

Fixes

Fixes: #621

webteam-app commented 4 months ago

Demo

Jenkins

demos.haus

advl commented 3 weeks ago

LGTM, thank you !

github-actions[bot] commented 3 weeks ago

:tada: This PR is included in version 1.2.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

edlerd commented 3 weeks ago

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