I want to be able to close the options list in a multiselect dropdown using an arrow,
so that it doesn't interfere with my ability to use the navigation menu in the footer.
Description
The app uses a Multiselect component from the multiselect-react-dropdown library in the Form and CategoryForm components to choose family members. To hide the dropdown menu, the user has to click away. Then, the menu is not visible, but if the user tries to click on the footer menu links "Categories" or "Family," he ends up clicking the dropdown menu, which becomes visible again upon being clicked.
Acceptance Criteria
The close-arrow icon is displayed only when the dropdown menu is open.
Clicking the arrow icon should close the options list, allowing user to interact with the navigation menu in the footer without any obstruction.
The dropdown should also close if user clicks outside of it, ensuring a seamless experience when navigating through the app.
Tasks
[ ] create feature branch feature/multiselect-fix
[ ] wrap the Multoselect component in Form and CategoryForm in container element and render a button with arrow positioned absolute in it.
[ ] implement logic to change z-index of the dropdown to 0 by clicking an arrow button and away of the container and to default value by clicking the container.
Multiselect dropdown - fix
Value Proposition
As a family member,
I want to be able to close the options list in a multiselect dropdown using an arrow,
so that it doesn't interfere with my ability to use the navigation menu in the footer.
Description
The app uses a
Multiselectcomponent from themultiselect-react-dropdownlibrary in theFormandCategoryFormcomponents to choose family members. To hide the dropdown menu, the user has to click away. Then, the menu is not visible, but if the user tries to click on the footer menu links "Categories" or "Family," he ends up clicking the dropdown menu, which becomes visible again upon being clicked.Acceptance Criteria
Tasks
feature/multiselect-fixMultoselectcomponent inFormandCategoryFormin container element and render abuttonwith arrow positioned absolute in it.buttonand away of the container and to default value by clicking the container.