@C-Lodder Is this good?

I have tested this item ? unsuccessfully on b636bac

Sorry this is not correct.

First I am getting a js error

TypeError: Cannot read property 'classList' of null
 /joomla-cms/media/templates/atum/js/template.js?70c984df970dc8781e009aafec6cfab4:299:51

This is how it should work. The dropdown stays open and selected until you select something else when it closes and stops being selected.

What this PR does is to

• keep it selected but closed if you click on the desktop
• keep it selected and still open if you click on another menu item
• You can open the dropdown by clicking on the desktop

@brianteeman I am running it on Chrome on an Ubuntu(18.04-VirtualBox) and I can't seem to replicate either the js error or the gif you have shown. Can you please tell as to how to replicate it?

My test is on chrome windows

@brianteeman This is what I am getting

@Subhang23 You don't need two event listeners. The dropdown already opens, so you don't need to toggle any classes.

You only need a single event listener. Something like this:

document.addEventListener('click', (event) => {
  if (!document.querySelector('.header-more-menu').contains(event.target)) {
    document.getElementById('header-more-items').classList.remove('active');
  }
});

Note: I haven't tested the above so don't assume it will work. Please test it first.

Yes exactly and that is wrong. As you open the user menu the other dropdown does not close.

@brianteeman @C-Lodder I think I got confused as to what to do. So if I click on the other dropdown the header-item-more dropdown should be gone(if active) while this doesn't happen in the PR I have made.

@brianteeman @C-Lodder Is this fine?

This is what I have been testing at present

document.addEventListener('click', (event) => {
    console.log(document.querySelector('.active'));
    if (document.querySelector('.header-item-more') && document.querySelector('header').querySelector('.active') && !document.querySelector('.header-item-more').contains(event.target)) {
      document.getElementById('header-more-items').classList.remove('active');
    }
  });

But I am facing some problems. On clicking some of the elements in the top navbar(the ones with a dropdown) there is no event being triggered.(The message in console.log is just for checking for any response )

@C-Lodder @brianteeman Can you help me out as to what is wrong here?
Edit:- Surprisingly the div that gets rendered(containing the links) responds to the eventLisnter

This is what I have been testing at present

document.addEventListener('click', (event) => {
    console.log(document.querySelector('.active'));
    if (document.querySelector('.header-item-more') && document.querySelector('header').querySelector('.active') && !document.querySelector('.header-item-more').contains(event.target)) {
      document.getElementById('header-more-items').classList.remove('active');
    }
  });

But I am facing some problems. On clicking some of the elements in the top navbar(the ones with a dropdown) there is no event being triggered.(The message in console.log is just for checking for any response )

@C-Lodder @brianteeman Can you help me out as to what is wrong here?
Edit:- Surprisingly the div that gets rendered(containing the links) responds to the eventLisnter

I have found an event listener attached to the dropdown buttons at the top nav which is giving me the problem. This eventListener gets loaded only after the first click on those buttons. Removing that listener has not caused any issues (removed it in the console) and solves the issue.

(The one which is button.dropdown-toggle)

@C-Lodder is it fine if I remove it?

@C-Lodder @brianteeman Can you review this?

I cannot comment on the code but it does do what it is supposed to do

The dropdown.js file attaches a click event listener which has .stopPropagation() function due to which a listener attached on the document was not working. So that is why I had to attach a listener to those elements

@C-Lodder what more changes should I do?

Code seems a bit "dirty" and trying to reinvent the wheel but if it works then fine.
I haven't really got the time to look further into it.