Menu bind:element not allowing to use toggle()/close()

aviadmini commented 1 year ago

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

I have a hotkey that opens a modal. When the menu is open and the hotkey is triggered then the menu is still opened when the modal opens. I want to close the menu in that case.

To solve this I'm trying to bind the menu element as per documentation: let menuElement: any; and <Menu gutter={5} withArrow placement="end" bind:element={menuElement}> What type should menuElement be?

I am using and <ActionIcon slot="control"> as custom control for the Menu

Calling menuElement.toggle(); throws an error, same for close()

In which browser(s) did the problem occur?

Firefox

Steps To Reproduce

use bind:element in Menu
call element.toggle() or element.close()

Do you know how to fix the issue

No

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

No

Relevant Assets

No response

aviadmini commented 1 year ago

Seems to be a documentation issue. I've accidentally located Menu.svelte.d.ts which hinted me to use bind:close. It worked

BeeMargarida commented 1 year ago

There are events (open and close), and exported methods that allow to control the state of the menu from the outside. This is not documented, but I'll fix it this week.

<Button on:click={() => element.toggle()}>Toggle Menu</Button>

<Menu bind:this={element}>
  <ActionIcon slot="control">...</ActionIcon>
  <Menu.Item icon={Gear}>Settings</Menu.Item>
  <Menu.Item icon={ChatBubble}>Messages</Menu.Item>
  <Menu.Item icon={Camera}>Gallery</Menu.Item>
</Menu>

You should also be able to control the state of the menu with the prop opened, only by binding it bind:opened and then changing it's value on the outside. Let me know if there are issues with this, since we have some ongoing issues with controlled props

svelteuidev / svelteui