vue-focus-on-mouseup

Vue directive that makes an element focus on mouse up event instead of mouse down. Useful for drag and drop.

Sometimes you do not want to focus an element when clicking the mouse but instead when releasing it. The most obvious use case is when dragging an element. You can drag it, but at the same time the focus animation happens, which looks awkward. Whis this directive, you can still focus the element, but with mouse up, it does not interfere with the drag and drop event. I've also seen a similar behavior in Trello.

Install via a package manager

# npm
$ npm install vue-focus-on-mouseup

# Yarn
$ yarn add vue-focus-on-mouseup

Add to local directives:

<script>
import VueFocusOnMouseup from 'vue-focus-on-mouseup'

export default {
  directives: {
    VueFocusOnMouseup,
  },
}
</script>

Or register as a global directive:

import Vue from 'vue'
import VueFocusOnMouseup from 'vue-focus-on-mouseup'

Vue.directive('VueFocusOnMouseup', VueFocusOnMouseup)

Or register as a plugin:

import Vue from 'vue'
import VueFocusOnMouseup from 'vue-focus-on-mouseup'

Vue.use(VueFocusOnMouseup)

Install via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-focus-on-mouseup"></script>

Usage

Just add the directive to the component you want to adjust, and then it should work out of the box.

<template>
  <button v-focus-on-mouseup>Hello world</button>
</template>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr