#StackBounty: #javascript #html #mdc-components MDC menu – keep menu open when focus is on input

Bounty: 50

I am building an autocomplete input using mdc web components. I have an input textfield and a menu. You can see the codesandox here.
I am showing the menu on focusin event, but if I start writing in the input field the menu is closed immediately.

const input = new MDCTextField(document.querySelector(".mdc-text-field"));
const menu = new MDCMenu(document.querySelector(".mdc-menu"));

input.listen("focusin", () => (menu.open = true));

I assume that is because of the menu default behaviour to close when click outside of the menu is triggered. The problem here is also that focus is taken by the first menu item from the textfield. What would be the way to prevent that, and have menu open until the focus is lost on the input field?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.