Question

0

123

Views

Implementing React Dropdown menu

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T06:45:51.819Z

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);