Fixes #38936 - Close kebab menu on outside click in Hosts index

[EnigmaXV]

• Fixed issue where the kebab menu does not close when clicking outside the menu.
• Added a useEffect hook to handle outside-click detection.
• Ensured the menu behaves consistently with other Foreman UI dropdowns.

[chris1984]

Left one comment, overall looks good

[chris1984]

Currently, the event listeners are added and removed every time menuOpen toggles. However, if the menu is closed, you technically don't need to listen for clicks on the document at all.

You can optimize performance slightly by exiting the effect early if the menu is not open.

What do you think of this:

useEffect(() => {
  if (!menuOpen) return;

  const handleClickOutside = event => {
    if (containerRef.current && !containerRef.current.contains(event.target)) {
       setMenuOpen(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  document.addEventListener('touchstart', handleClickOutside);

  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
    document.removeEventListener('touchstart', handleClickOutside);
  };
}, [menuOpen, setMenuOpen]);

[EnigmaXV]

Thank you for the suggestion. It makes total sense. I’ve updated the effect to early-return when menuOpen is false, so the document listeners are only attached while the menu is open. I also removed the extra menuOpen check inside the handler since it’s no longer needed.

Merry Christmas 🎄