VueJS - Click event is not triggered as parent event prevaults

Question

I am building a search input that fetchs data from my API and lists it in a dropdown list.

Here is the behavior I want my component to have:

If I start typing and my API founds data, it opens the dropdown menu and lists it.
- If I click on one of the elements from the list, it is set as 'activeItem' and the dropdown list closes
- Else, I can click out of the component (input and dropdown list) and the dropdown list closes
Else, no dropdown list appears and my input works like a regular text input

My issue has to do with Event Bubbling.

My list items (from API) have a @click input that set the clicked element as the 'activeItem'.
My input has both @focusin and @focusout events, that allow me to display or hide the dropdown list.

I can't click the elements in the dropdown list as the @focusout event from the input is being triggered first and closes the list.

import ...

export default {
  components: {
    ...
  },

  props: {
    ...
  },

  data() {
    return {
      results: [],
      activeItem: null,
      isFocus: false,
    }
  },

  watch: {
    modelValue: _.debounce(function (newSearchText) {
      ... API Call
    }, 350)
  },

  computed: {
    computedLabel() {
      return this.required ? this.label + '*' : this.label;
    },

    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },

  methods: {
    setActiveItem(item) {
      this.activeItem = item;

      this.$emit('selectItem', this.activeItem);
    },

    resetActiveItem() {
      this.activeItem = null;

      this.isFocus = false;
      this.results = [];

      this.$emit('selectItem', null);
    },
  },

  emits: [
    'selectItem',
    'update:modelValue',
  ],
}

Here is a look at the input:

With API results (can't click the elements):

When no data is found:

I tried:

handleFocusOut(e) {
    console.log(e.relatedTarget, e.target, e.currentTarget)
    // No matter where I click:
    // e.relatedTarget = null
    // e.target =

The solution:

relatedTarget will be null if the element you click on is not focusable. by adding the tabindex attribute it should make the element focusable and allow it to be set as relatedTarget. if you actually happen to be clicking on some container or overlay element make sure the element being clicked on has that tabindex="0" added to it so you can maintain isFocus = true

Thanks to @yoduh for the solution

yoduh · Accepted Answer

The root issue looks to be how the dropdown list is being removed from the DOM as soon as the input loses focus because of the v-if on it.

This is ok to have, but you'll need to work around it by coming up with a solution that keeps isFocus true whether the focus is on the input or the dropdown. I would suggest your input's @focusout to execute a method that only sets isFocus = false if the focus event's relatedTarget is not any of the dropdown items (can be determined via classname or other attribute). One roadblock to implementing this is that some elements aren't natively focusable, like

items, so they won't be set as the relatedTarget, but you can make them focusable by adding the tabindex attribute. Putting it all together should look something like this:

...

loseFocus(event) {
  if (event.relatedTarget?.className !== 'listResult') {
    this.isFocus = false;
  }
}
setActiveItem(item) {
  this.activeItem = item;
  this.isFocus = false;
  this.$emit('selectItem', this.activeItem);
}

VueJS - Click event is not triggered as parent event prevaults

Answers (1)

Related Questions