Multiple instances share the same input state

xiaoluoboding / vue-command-palette

⌨️ A fast, composable, unstyled command palette interface for Vue.

https://vue-command-palette.vercel.app

MIT License

530 stars 26 forks source link

Multiple instances share the same input state #13

Closed BayBreezy closed 1 year ago

BayBreezy commented 1 year ago

Hello @xiaoluoboding ,

Thanks for the package :)

I was using the package today and realised that multiple instances of the Command component on the same page share the same state. This was done in nuxt 3.

I created a reusable component.
Added it twice to the same page
Search for an item in 1 & the same input was shared with the second instance.

Here is a screenshot of what I am talking about

https://github.com/xiaoluoboding/vue-command-palette/assets/53905713/07e50bf8-1de5-4cc0-b5a8-ac9500046ea5

This was also the case when i moved it into a dialog in the Navbar. I am not sure if this is the intended behaviour but usually, different palettes on the same page may be for different things. Let me knw if i missed something in the docs or something.

xiaoluoboding commented 1 year ago

Command palette interfaces are used to create a web experience where users can quickly get in charge with keyboard shortcuts, rather than using the mouse.

With macOS's Spotlight and Raycast's command palette experience in mind, vue-command-palette is designed to provide a fast, composable, unstyled command palette to your site.

We should not overlook the issue of multiple instances of the Command appearing in a single window. Please use it appropriately.

BayBreezy commented 1 year ago

Odd... What if my web application needs a command palette that searches through a list of blogs returned from an API and a second instance of the command palette that perform common actions? I don't think it would be wise to have the blog command palette's input and the common actions command palette input sharing the same state on the same page.

This sounds like you are saying I should only have one command palette instance on the page and if I am in need of another then I am using the package incorrectly, did I interpret that right?

xiaoluoboding commented 1 year ago

You can modify the command content by using different component views, similar to the provided example.

https://vue-command-palette.vercel.app/

BayBreezy commented 1 year ago

But modifying how each instance looks does not change the fact that they all share the same input state once they are rendered on the same page.