CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Heyyy Marco
Heyyy Marco

Reputation: 753

Implementing React Dropdown menu

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

Upvotes: 2

Views: 172

Answers (1)

Uchechukwu Nwafor
Uchechukwu Nwafor

Reputation: 435

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

Upvotes: 1

Related Questions