Adding a search bar (Input) to the Mega Menu – Menu Closes or Input Not Editable

[lidorz]

Hi everyone,

I'm trying to add a custom input field/button to the Mega Menu in the Employee Center portal.

What I did so far:

• I cloned the widget: Employee Center Navigation

• I successfully added my input field/button to the HTML. The input appears inside the Mega Menu.

• 

The issue:

When I click on the input (or anywhere inside the Mega Menu), the menu immediately closes.
I tried using:

html

CopyEdit

<input ng-click="$event.stopPropagation();" ng-mousedown="$event.stopPropagation();" />

• With this code, the menu stays open when I click the input, but I can't type anything inside the input field.

• I identified that the function responsible for closing the menu is: c.closeMegaMenu();

My question:

Has anyone successfully added a custom input (like a search bar or custom button) inside the Mega Menu and made it work as expected?

How can I prevent the menu from closing while allowing typing and focus in the input?
Any code sample, workaround, or best practice would be really appreciated!

---

Thank you in advance!
If you need code snippets or more details — just let me know.