Selecting item from list doesn’t fired @hit on Safari

[socheatsok78]

On Safari, selecting item from the list doesn’t do anything! Any solution?

[alexurquhart]

Thanks for the feedback. I don't have any solution yet, I'll have to find a way to test on Safari.

[Owumaro]

I started digging on this and

vue-bootstrap-typeahead/src/components/VueBootstrapTypeahead.vue

Line 140 in 58f22ae

const tgt = evt.relatedTarget

While this provides the clicked element in Chrome, the value in Safari is null....

Weird as Safari seems to be ok on this:
https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget#Browser_compatibility

In some cases (like when tabbing in or out of a page), this property may be set to null for security reasons.

Don't think this applies here...

[Owumaro]

Found a nice explanation here:

https://stackoverflow.com/questions/42764494/blur-event-relatedtarget-returns-null

I just tested adding tabindex="0" on the <a> tag in VueBootstrapTypeaheadListItem.vue and it does fix the issue in Safari.

[ChuchunovMV]

Hi, the same problem manifested itself in IE11, the Blur event does not return a relatedTarget, it worked when I changed the event to focusout. Can you fix the release?

[chriszrc]

Huh, it's working for me in Safari, what version of Safari are you using?

[rmknecht]

Hi, the same problem manifested itself in IE11, the Blur event does not return a relatedTarget, it worked when I changed the event to focusout. Can you fix the release?

Can confirm, I am encountering the same issue in IE11.

[AntoineLX]

Hi, the same problem manifested itself in IE11, the Blur event does not return a relatedTarget, it worked when I changed the event to focusout. Can you fix the release?

Same issue here on IE11. Can you please please fix the release ?

[triplejae]

Also confirmed that IE11 does not fire the @hit event. Fix would be much appreciated here.

[nitin-fed]

please give some solution for the @hit is not firing in IE 11. Banging my head for this issue. Please provide some fix...

[rmknecht]

After looking into why the hit event "disappears" in IE11 I believe the issue is related to hiding and showing <vue-bootstrap-typeahead-list> at:

vue-bootstrap-typeahead/src/components/VueBootstrapTypeahead.vue

Line 30 in d0bc765

v-show="isFocused && data.length > 0"

When v-show == false the element in the DOM is set to display: none; and IE11 appears to ignore/supress/blow-away any associated events bubbling up - including the emitted hit.

I removed the v-show and the event works in IE11; however, this breaks the display logic and the list remains visible.

I tried swapping v-show on <vue-bootstrap-typeahead-list> for a custom class to "move" the list out of view, instead of setting the display property, and didn't have any luck resolving the issue. Will continue to poke around to see if an IE11 compatible solution exists.

[Raisi]

Solved with an faked animation and an duration that is quite long enough to count as user interaction:
replaced
v-show="isFocused && data.length > 0"
with
:class="{'vbt-autcomplete-list--hidden': !(isFocused && data.length > 0)}"
and in the style section

/* Fake for IE. because it doesn't emit the hit event when using display:none */
    .vbt-autcomplete-list--hidden {
        animation-name: hide;
        animation-fill-mode: both;
        animation-duration: .3s;
        animation-timing-function: linear;
    }


    @keyframes hide {
        to {
            visibility: hidden;
            display: none;
        }
    }

[socheatsok78]

@Raisi do a pull request 👍

[stanislavhannes]

Solved with an faked animation and an duration that is quite long enough to count as user interaction:
replaced
v-show="isFocused && data.length > 0"
with
:class="{'vbt-autcomplete-list--hidden': !(isFocused && data.length > 0)}"
and in the style section

/* Fake for IE. because it doesn't emit the hit event when using display:none */
    .vbt-autcomplete-list--hidden {
        animation-name: hide;
        animation-fill-mode: both;
        animation-duration: .3s;
        animation-timing-function: linear;
    }


    @keyframes hide {
        to {
            visibility: hidden;
            display: none;
        }
    }

Thank u very much! Works perfect!

[peterhass]

Solved with an faked animation and an duration that is quite long enough to count as user interaction:
replaced
v-show="isFocused && data.length > 0"
with
:class="{'vbt-autcomplete-list--hidden': !(isFocused && data.length > 0)}"
and in the style section

/* Fake for IE. because it doesn't emit the hit event when using display:none */
    .vbt-autcomplete-list--hidden {
        animation-name: hide;
        animation-fill-mode: both;
        animation-duration: .3s;
        animation-timing-function: linear;
    }


    @keyframes hide {
        to {
            visibility: hidden;
            display: none;
        }
    }

Thanks a lot!

Since I needed to fix this ASAP I created a component to apply the workaround. I didn't like copying the whole template section but I found no other quick solution (other than forking this package).

<template>
  <div>
    <div :class="sizeClasses">
      <div
        ref="prependDiv"
        v-if="$slots.prepend || prepend"
        class="input-group-prepend"
      >
        <slot name="prepend">
          <span class="input-group-text">{{ prepend }}</span>
        </slot>
      </div>
      <input
        ref="input"
        type="search"
        :class="`form-control ${inputClass}`"
        :placeholder="placeholder"
        :aria-label="placeholder"
        :value="inputValue"
        @focus="isFocused = true"
        @blur="handleBlur"
        @input="handleInput($event.target.value)"
        autocomplete="off"
      />
      <div v-if="$slots.append || append" class="input-group-append">
        <slot name="append">
          <span class="input-group-text">{{ append }}</span>
        </slot>
      </div>
    </div>
    <vue-bootstrap-typeahead-list
      class="vbt-autcomplete-list"
      ref="list"
      :class="{
        'vbt-autcomplete-list--hidden': !(isFocused && data.length > 0)
      }"
      :query="inputValue"
      :data="formattedData"
      :background-variant="backgroundVariant"
      :text-variant="textVariant"
      :maxMatches="maxMatches"
      :minMatchingChars="minMatchingChars"
      @hit="handleHit"
    >
      <!-- pass down all scoped slots -->
      <template
        v-for="(slot, slotName) in $scopedSlots"
        :slot="slotName"
        slot-scope="{ data, htmlText }"
      >
        <slot :name="slotName" v-bind="{ data, htmlText }"></slot>
      </template>
      <!-- below is the right solution, however if the user does not provide a scoped slot, vue will still set $scopedSlots.suggestion to a blank scope
            <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
              <slot name="suggestion" v-bind="{ data, htmlText }" />
            </template>-->
    </vue-bootstrap-typeahead-list>
  </div>
</template>
<script>
// Workaround to fix dead list selection in IE
// https://github.com/alexurquhart/vue-bootstrap-typeahead/issues/14#issuecomment-547389426
import VueBootstrapTypeahead from "vue-bootstrap-typeahead"

export default {
  extends: VueBootstrapTypeahead
}
</script>
<style lang="scss">
/* Fake for IE. because it doesn't emit the hit event when using display:none */
.vbt-autcomplete-list--hidden {
  animation-name: hide;
  animation-fill-mode: both;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

@keyframes hide {
  to {
    visibility: hidden;
    display: none;
  }
}
</style>