fix: library dropdowns behavior #2210
Conversation
Updated the click event prevention in the BaseCard component to allow dropdown toggle clicks to propagate, ensuring proper coordination between dropdowns.
Replaced the ModalPopup with a Dropdown for better user experience. The filtering dropdowns (publish status/ component type/ tags) all close out if a user clicks anywhere outside of the dropdown menus. In this implementation, however, clicking outside of the opened menu only triggers closing the menu. As in: if a filtering dropdown is open, and decide you want to open a different filtering option, a user has to click twice: once to close the initially opened dropdown, and a second time to open the second filtering option.
openedx-webhooks
added
the
open-source-contribution
|
Thanks for the pull request, @DanielVZ96! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #2210 +/- ##
==========================================
+ Coverage 94.11% 94.14% +0.02%
==========================================
Files 1164 1164
Lines 24507 24616 +109
Branches 5201 5255 +54
==========================================
+ Hits 23065 23174 +109
Misses 1374 1374
Partials 68 68 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Hi @DanielVZ96 , this is working great for the main Library page!
We just need the same behavior on the Unit and Section/Subsection pages too.
| if (!isDropdownToggle) { | ||
| e.stopPropagation(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
@DanielVZ96 Could you apply the same to the section/subsection child preview cards:
And to the Unit child preview cards:
| {filterLabels[filter]}{' '} | ||
| <Badge variant="light" pill>{publishStatus[filter] ?? 0}</Badge> |
There was a problem hiding this comment.
Actually, our translated filter labels should be formatted text that includes a variable for this count badge, so that RTL languages can opt to put the count on the left side of the text label. But since that's out of scope for this change it's ok to do as a follow-up PR.
CC @ChrisChV
Description
Changes:
SearchFilterWidgetto useDropdowncomponent instead ofModalPopupin order to be able to close the current filter and interact with other elements in a single click.BaseCardcomponent to allow proper event propagationSupporting information
Testing instructions
On a library v2:
Open any of the following filters: type, publish status, tags
Open another filter
Assert only a single click is needed to close and open a new filter
Create multiple library units, sections/subsections, collections, components
Open the dropdown menu of each one of them as shown in the picture