Implementing React Dropdown menu

user_1116368 0
Viewed 92

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

enter image description here

I want:

  1. Clicking the body / anything outside the <Dropdown> => handleClose()
  2. Clicking any <ActionMenu> => handleClose()
  3. Clicking any children inside the <ActionMenu> => handleClose() if preventDefault() was not called
  4. Clicking any <ActionMenu enabled={false}> => do nothing
  5. Clicking any children inside the <ActionMenu enabled={false}> => do nothing
  6. Clicking any disabled children inside the <ActionMenu> => do nothing
  7. Clicking any <NonActionMenu> => do nothing
  8. Clicking any children inside the <NonActionMenu> => do nothing
  9. <Dropdown> lost focus (onBlur=) because an element outside dropdown got focus => handleClose()
  10. <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

react-hooks reactjs javascript
1 Answers

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