Dropdown: clicking vs. keyboard

[peterhijma]

Perfect library.

My question is regarding the Dropdown component.

I have one item where I put this on:

click: (e) => {
  e.preventDefault();
  console.log("Hello");
},

There is a difference in behaviour:

• Clicking: clicking this item will log "Hello" to the console and keep the dropdown open
• Arrow keys + ENTER (or SPACE): this will close the dropdown and also log the message

My actual question: how can I prevent the dropdown from closing when using the keyboard?

Thanks in advance!

[benjamincanac]

I've been trying to achieve this for quite some time but unfortunately, the Headless UI Menu component closes the menu when pressing Enter: https://github.com/tailwindlabs/headlessui/blob/8e93cd063067bb1ad95d098655670a7d9a4d9e4a/packages/%40headlessui-vue/src/components/menu/menu.ts#L390C26-L390C26 and there is nothing we can do about it.

[peterhijma]

@benjamincanac thanks for checking. Should this issue be closed then?

[benjamincanac]

Well, I'd rather keep it open as it's not solved. Maybe Headless UI will solve this someday.