search

svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.3k stars 62 forks source link

Not possible to add an Input inside a Menu #310

Closed BeeMargarida closed 1 year ago

BeeMargarida commented 1 year ago

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

Issue mentioned here: https://discord.com/channels/954790377754337280/1072828357940617236

Currently it is not possible to add an Input inside a Menu. When trying to focus on the input or type on the input, it will close the Menu.

In which browser(s) did the problem occur?

Firefox

Steps To Reproduce

  1. Add a TextInput inside a Menu
  2. Try to type on it

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

No response

BeeMargarida commented 1 year ago

Fixed, when adding a component that should be interacted with instead of just closing the menu, the way to do it is wrapping it in a Menu.Label, like

<Menu>
  <Menu.Item icon={Gear}>Settings</Menu.Item>
  <Menu.Item icon={ChatBubble}>Messages</Menu.Item>
  <Menu.Item icon={Camera}>Gallery</Menu.Item>
  <Menu.Label><TextInput placeholder="Search" /></Menu.Label>
</Menu>