Comments (14)
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?
from vue-bootstrap-typeahead.
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;
}
}
from vue-bootstrap-typeahead.
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.
from vue-bootstrap-typeahead.
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!
from vue-bootstrap-typeahead.
Thanks for the feedback. I don't have any solution yet, I'll have to find a way to test on Safari.
from vue-bootstrap-typeahead.
I started digging on this and
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...
from vue-bootstrap-typeahead.
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.
from vue-bootstrap-typeahead.
Huh, it's working for me in Safari, what version of Safari are you using?
from vue-bootstrap-typeahead.
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 ?
from vue-bootstrap-typeahead.
Also confirmed that IE11 does not fire the @hit event. Fix would be much appreciated here.
from vue-bootstrap-typeahead.
please give some solution for the @hit is not firing in IE 11. Banging my head for this issue. Please provide some fix...
from vue-bootstrap-typeahead.
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:
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.
from vue-bootstrap-typeahead.
@Raisi do a pull request 👍
from vue-bootstrap-typeahead.
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>
from vue-bootstrap-typeahead.
Related Issues (20)
- Is this project actively maintained? HOT 2
- Suggest list is hover, after swipe the list HOT 1
- Suggestion: support array of objects as data source HOT 4
- Suggestion: Would like to see "state" added as a prop HOT 1
- Autofocus when component mounted or after refresh page HOT 2
- How it will work with typescript? HOT 2
- Sort Suggestions HOT 2
- Selected value lost on route change and back to the main typeahead page HOT 5
- Invalid prop: custom validator check failed for prop "serializer".
- Migration from vue-strap HOT 1
- v-model does not show the value of the attribute loaded in created() or mounted() HOT 2
- THIS PROJECT ABANDONED ..! ..? HOT 2
- ReferenceError: Can't find variable: regeneratorRuntime
- No disable HOT 2
- blur-attribut HOT 1
- v-model= null throws error Cannot read property 'normalize' of null
- Typo error
- Scroll bar is not working when we use it in a modal popup.
- Use keyboard arrow up/down to move through candidate and Enter to select
- Error When I try to use Number in Search
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-bootstrap-typeahead.