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 + '<span class="text-primary-600 font-bold ml-1">*</span>' : 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',
  ],
}
</script>

<template>
  <div class="relative">
    <label
        v-if="label.length"
        class="block text-tiny font-bold tracking-wide font-medium text-black/75 mb-1 uppercase"
        v-html="computedLabel"
    ></label>

    <div :class="widthCssClass">
      <div class="relative" v-if="!activeItem">
        <div class="flex items-center text-secondary-800">
          <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-3.5 w-3.5 ml-4 absolute"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
          >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>

          <!-- The input that triggers the API call -->
          <input
              class="text-black py-2.5 pr-3.5 pl-10 text-black focus:ring-primary-800 focus:border-primary-800 block w-full rounded sm:text-sm border-gray-300"
              placeholder="Search for anything..."
              type="text"
              @input="$emit('update:modelValue', $event.target.value)"
              @focusin="isFocus = true"
              @focusout="isFocus = false"
          >
        </div>

       <!-- The Dropdown list -->
        <Card
            class="rounded-t-none shadow-2xl absolute w-full z-10 mt-1 overflow-y-auto max-h-48 px-0 py-0"
            v-if="isFocus && results.length"
        >
          <div class="flow-root">
            <ul role="list" class="divide-y divide-gray-200">

              <!-- API results are displayed here -->
              <li
                  v-for="(result, index) in results"
                  :key="index"
                  @click="setActiveItem(result)" <!-- The event I can't trigger -->
              >
                <div class="flex items-center space-x-4 cursor-pointer px-4 py-3">
                  <div class="flex-shrink-0">
                    <img
                        class="h-8 w-8 rounded-md ring-2 ring-lighter shadow-lg"
                        :src="result.image ?? this.$page.props.page.defaultImage.url"
                        :alt="result.title"
                    />
                  </div>
                  <div class="min-w-0 flex-1">
                    <p
                        class="truncate text-sm font-medium text-black"
                        :class="{
                          'text-primary-900 font-bold': result.id === activeItem?.id
                        }"
                    >
                      {{ result.title }}
                    </p>
                    <p class="truncate text-sm text-black/75">
                      {{ result.description }}
                    </p>
                  </div>
                  <div v-if="result.action">
                    <Link
                        :href="result.action?.url"
                        class="inline-flex items-center rounded-full border border-gray-300 bg-white px-2.5 py-0.5 text-sm font-medium leading-5 text-black/75 shadow-sm hover:bg-primary-50"
                        target="_blank"
                    >
                      {{ result.action?.text }}
                    </Link>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </Card>
      </div>

      <!-- Display the active element, can be ignored for this example -->
      <div v-else>
        <article class="bg-primary-50 border-2 border-primary-800 rounded-md">
          <div class="flex items-center space-x-4 px-4 py-3">
            <div class="flex-shrink-0">
              <img
                  class="h-8 w-8 rounded-md ring-2 ring-lighter shadow-lg"
                  :src="activeItem.image ?? this.$page.props.page.defaultImage.url"
                  :alt="activeItem.title"
              />
            </div>
            <div class="min-w-0 flex-1">
              <p class="truncate text-sm font-medium text-black font-bold">
                {{ activeItem.title }}
              </p>
              <p class="truncate text-sm text-black/75 whitespace-pre-wrap">
                {{ activeItem.description }}
              </p>
            </div>
            <div class="flex">
              <AppButton @click.stop="resetActiveItem();" @focusout.stop>
                <svg
                    class="w-5 h-5 text-primary-800"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M6 18L18 6M6 6l12 12"
                  ></path>
                </svg>
              </AppButton>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

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 = <input id="search" class="...
    // e.currentTarget = <input id="search" class="...
}
...

<input
    id="search"
    class="..."
    placeholder="Search for anything..."
    type="text"
    @input="$emit('update:modelValue', $event.target.value)"
    @focusin="isFocus = true"
    @focusout="handleFocusOut($event)"
>

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

Can't you just put the @focusin and @focusout events on a container that includes both the input and the dropdown list? — Moritz Ringler
– Moritz Ringler, Commented Jan 31, 2023 at 23:05
Tried it, didn't work either. Also tried to handle the focus state in a dedicated method but event.target and event.currentTarget return the input and the div I put the event on. Every time. Can't see if the user clicked on an elements outside the component. I'm missing something here. — Gaël Duval
– Gaël Duval, Commented Jan 31, 2023 at 23:08

yoduh · Accepted Answer · 2023-02-01 01:14:47Z

2

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.

<Card
  v-if="isFocus && results.length"
>

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 <li> 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:

<input
  type="text"
  @input="$emit('update:modelValue', $event.target.value)"
  @focusin="isFocus = true"
  @focusout="loseFocus($event)"
/>

...

<li
  v-for="(result, index) in results"
  :key="index"
  class="listResult"
  tabindex="0"
  @click="setActiveItem(result)"
>

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

answered Feb 1, 2023 at 1:14

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gaël Duval Over a year ago

Thanks for your answer. event.relatedTarget is always null in my case. And event.target and event.currentTarget return the input text, no matter where I click.

yoduh Over a year ago

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

Gaël Duval Over a year ago

Damn, this tabindex thing is crazy. I had no idea it would prevent my element from being set as relatedTarget. Thanks man, it fixes my prob.

Collectives™ on Stack Overflow

VueJS - Click event is not triggered as parent event prevaults

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related