Implementing React Dropdown menu

Question

I'm creating a Dropdown menu using React.
But I've no idea how to implement handleClose().

I want:

Clicking the body / anything outside the <Dropdown> => handleClose()
Clicking any <ActionMenu> => handleClose()
Clicking any children inside the <ActionMenu> => handleClose() if preventDefault() was not called
Clicking any <ActionMenu enabled={false}> => do nothing
Clicking any children inside the <ActionMenu enabled={false}> => do nothing
Clicking any disabled children inside the <ActionMenu> => do nothing
Clicking any <NonActionMenu> => do nothing
Clicking any children inside the <NonActionMenu> => do nothing
<Dropdown> lost focus (onBlur=) because an element outside dropdown got focus => handleClose()
<Dropdown> lost focus (onBlur=) because an element inside dropdown got focus => do nothing

Implementing <Dropdown onBlur={() => handleClose()} ...> works for point 9 but failed for point 10.

Can you suggest your idea?

I've no sandbox because the project is quite complex.
But you can fork & modify here: my project

The handleClose() should just render the drop-down list. Nothing more. Any logic to Call the function should be done outside that. For point 10, an onFocus attribute calling the handleClose should be passed to each drop-down item. — Uchechukwu Nwafor
– Uchechukwu Nwafor, Commented Sep 19, 2021 at 15:34
Inside the handleClose() is calling props.?onClose(), so the user can decide to update/refuse the state: onClose={() => setShow(false)}. I'm stuggling where to spread the event for triggering handleClose() — Heyyy Marco
– Heyyy Marco, Commented Sep 19, 2021 at 15:41
onFocus should not causing handleClose(). Imagine a user click on an item and suddenly cancel the click (by dragging out -or- holding left click followed by right click -or- by tab key). The item got focus but not clicked. — Heyyy Marco
– Heyyy Marco, Commented Sep 19, 2021 at 15:50
My bad, I didn't mean onFocus. I meant onClick or when the Enter key is pressed. So when an item is clicked. It is chosen first of all and then sets the show to false which is what the handleClose function does — Uchechukwu Nwafor
– Uchechukwu Nwafor, Commented Sep 19, 2021 at 15:57

Uchechukwu Nwafor · Accepted Answer · 2021-09-19 19:14:45Z

1

For the click, you can add an event listener to the window object to take care of any click outside the dropdown wrapper. You can also modify this for the enter key:

   window.addEventListener('click', function(e) {
        const dropDownWrapper = document.querySelector('#id of dropdown wrapper');
        const path = e.path || (e.composedPath && e.composedPath());
        if (!path.some(x => !(x instanceof SVGElement) && x.id && x.id === '#id of dropdown wrapper')) {
          dropDownWrapper.querySelector('.class of dropdownlist') ?
            x.querySelector('.class of dropdownlist').style.display = 'none' : null
          } else{
            dropDownWrapper.querySelector('.class of dropdownlist') ?
            x.querySelector('.class of dropdownlist').style.display = 'block' : null
          }
   }, true);

answered Sep 19, 2021 at 19:14

Uchechukwu Nwafor

4354 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Heyyy Marco Over a year ago

hmm interesting. so it basically filter out any element === dropdownWrapper || childOrDescendantOf(element, dropdownWrapper), right?

Uchechukwu Nwafor Over a year ago

yes, exactly. Also takes care of the element being an svg. They tend to throw an error onClick if not taken care of

Heyyy Marco Over a year ago

I prefer focus instead of click, but focus is not bubbling in vanilla dom, only in React's synthetic event. How about handling tab key?

Uchechukwu Nwafor Over a year ago

I'm not sure about this. But I think you should be able to replace the click with focus

Heyyy Marco Over a year ago

unfortunately focus is not bubbling from child to parent to window. Attaching addEventListener to every element is impractical & poor performance. Maybe handling tab key + click is better.

|

Collectives™ on Stack Overflow

Implementing React Dropdown menu

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related