search

AustinGil / vuetensils

🍴 A tasty toolset for Vue.js 🛠 - Lightweight, functional components to boost your next project.
https://vuetensils.austingil.com/
MIT License
660 stars 38 forks source link

Feature: Focusout #128

Closed lbineau closed 1 year ago

lbineau commented 3 years ago

There is the already very useful https://vuetensils.stegosource.com/directives/clickout.html directive. With accessibility we often need the equivalent for keyboard (ex: disclosure navigation needs to close when focus gets out of the nav element https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html)

What do you think to have a new directive for that? The only one I find on the web is https://www.npmjs.com/package/vue-outside-events

AustinGil commented 3 years ago

Oooh, this is a great idea. I'm trying to shift focus to supporting Vue 3, and I THOUGHT custom directives were being deprecated, but now I see it's just a breaking change in their implementation. Now I see they are not deprecated, I need to add Vue 3 support to the existing ones as well. And then I can add this new one.

By the way, I dont know your use case, but I would consider a CSS only solution first. Could you accomplish what you need with :focus-within (https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) ?

AustinGil commented 1 year ago

This will be available in the next release.