Skip to content

Add an option to open and close the menu #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
meirlamdan opened this issue Jan 6, 2025 · 3 comments · Fixed by #182
Closed

Add an option to open and close the menu #161

meirlamdan opened this issue Jan 6, 2025 · 3 comments · Fixed by #182
Labels
enhancement New feature or request next release

Comments

@meirlamdan
Copy link

meirlamdan commented Jan 6, 2025

First of all, thank you very much for the useful and purposeful library.

I wanted the menu to be open even before the user clicks, but I couldn't find such an option.

I also couldn't do it with :ref="(e) => e.openMenu()" because it's not exported by defineExpose
(You can see how it is in Multiselect )

Update: I managed to do it this way :

const vSelect = useTemplateRef('vSelect');
onMounted(() => {
 vSelect.value.$el.querySelector('input').dispatchEvent(new Event('mousedown'));
})

But it would be helpful if there was an official way and with full control

@TotomInc
Copy link
Owner

TotomInc commented Jan 6, 2025

I'm happy to see the component being used and appreciated by the Vue community, thanks for the kind words!

To resolve the issue and avoid the small hack you've used, I can introduce a new optional prop menuOpen: Ref<boolean>.

Doing this will allow programmatic control over the menu open state.

@TotomInc TotomInc added the enhancement New feature or request label Jan 6, 2025
@bedorn
Copy link

bedorn commented Jan 21, 2025

menuOpen prop would be great

TotomInc added a commit that referenced this issue Jan 30, 2025
Fixes #161

Add an option to programmatically control the menu open state.

* Add a new prop `isMenuOpen` to `src/Select.vue` to control the menu open state.
* Update the `openMenu` and `closeMenu` methods to use the `isMenuOpen` prop.
* Add a watcher to sync the `menuOpen` state with the `isMenuOpen` prop.
* Update the documentation in `docs/props.md` to include the new `isMenuOpen` prop.
* Add tests in `src/Select.spec.ts` to verify the functionality of the `isMenuOpen` prop.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/TotomInc/vue3-select-component/issues/161?shareId=XXXX-XXXX-XXXX-XXXX).
TotomInc added a commit that referenced this issue Jan 30, 2025
Fixes #161

Add an option to programmatically control the menu open state.

* Add a new prop `isMenuOpen` to `src/Select.vue` to control the menu open state.
* Update the `openMenu` and `closeMenu` methods to use the `isMenuOpen` prop.
* Add a watcher to sync the `menuOpen` state with the `isMenuOpen` prop.
* Update the documentation in `docs/props.md` to include the new `isMenuOpen` prop.
* Add tests in `src/Select.spec.ts` to verify the functionality of the `isMenuOpen` prop.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/TotomInc/vue3-select-component/issues/161?shareId=XXXX-XXXX-XXXX-XXXX).
TotomInc added a commit that referenced this issue Jan 30, 2025
* feat: add isMenuOpen prop to programatically control menu state

Fixes #161

Add an option to programmatically control the menu open state.

* Add a new prop `isMenuOpen` to `src/Select.vue` to control the menu open state.
* Update the `openMenu` and `closeMenu` methods to use the `isMenuOpen` prop.
* Add a watcher to sync the `menuOpen` state with the `isMenuOpen` prop.
* Update the documentation in `docs/props.md` to include the new `isMenuOpen` prop.
* Add tests in `src/Select.spec.ts` to verify the functionality of the `isMenuOpen` prop.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/TotomInc/vue3-select-component/issues/161?shareId=XXXX-XXXX-XXXX-XXXX).

* fix: improve input keydown space detection

* fix(select): watch props.isMenuOpen should be immediate

* feat(select): emit menuOpened and menuClosed, ensure closeMenu/openMenu are called internally

* feat(docs): add menu-closed and menu-opened events

* feat(docs): add controlled menu demo
@TotomInc
Copy link
Owner

Released in v0.8.0 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request next release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants