close on click outside vue-at

[rutujak92]

I want to close @at dropdown on outside click is there an option to do this?

[fritx]

@rutujak92 yes, If you just want the dropdown to hide when clicking outside of the editor, there is a solution (see https://github.com/fritx/vue-at/issues/20#issuecomment-327417664), you can try it.

In stead if you need the feature you want it to hide when clicking outside anywhere, you can probably change the target to window or document to bind some once listener to make it work.

[fritx]

<at ref="at">
  <div class="editor"
    @focus="handleFocus"
    @blur="handleBlur"></div>
</at>

<script>
export default {
  data () {
    return {
      blurTimer: null,
      hideOnBlur: true
    }
  },
  methods: {
    handleFocus () {
      if (this.hideOnBlur) {
        clearTimeout(this.blurTimer)
      }
    },
    handleBlur () {
      if (this.hideOnBlur) {
        this.blurTimer = setTimeout(()=>{
          this.$refs.at.closePanel()
        }, 1500)
      }
    }
  }
}
</script>