There is a little “x” which appears when I type in the following search control, when I click it my filter is cleared and my page re-renders. This works fine in chrome. However, it does not work in Edge 17.17134, clicking the “x” does nothing. How can I make it work?
HTML:
<div class=”input-group search”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>
<i class=”fa fa-search”></i>
</span>
</div>
<input type=’search’
class=”form-control”
placeholder=”Type to filter…”
v-model=”filter”
@input=”performFilter” />
</div>
CODE:
data: function () {
return {
filter: ‘’
};
},
methods: {
performFilter() {
var filter = this.filter.toLowerCase();
this.objs.forEach(function (obj) {
obj.visible = obj.name.toLowerCase().includes(filter);
});
}
}
Update:
Seems its a bug in Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/
Solution :
This has nothing to do with Vue.js or bootstrap, it’s just how Chrome renders <input type=”search”>.
If you want the same behavior on all browsers, use type=”text” and create the own “x” which clears input on click.
Solution 2:
Agree with you, it seems like a publish bug in Edge browser.
As a workaround, I suggest you could attach the mouseup event of the textbox, then using this event to capture the clear action. Please refer to the following code:
<head>
<meta charset=”utf-8”>
<title>iview example</title>
<script type=”text/javascript” src=”http://vuejs.org/js/vue.min.js"></script>
<script type=”text/javascript” src=”http://unpkg.com/iview/dist/iview.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”findindexpolyfill.js”></script>
</head>
<body>
<div id=”app”>
<input type=’text’ id=”txtfilter”
placeholder=”Type to filter…”
v-model=”filter”
@input=”performFilter” @mouseup=’mouseupEvent’ />
</div>
<script>
new Vue({
el: ‘#app’,
data: {
show: false,
filter:””
},
methods: {
performFilter() {
var filter = this.filter.toLowerCase();
console.log(“input event!” + filter +”<br/>”);
//this.objs.forEach(function (obj) {
// obj.visible = obj.name.toLowerCase().includes(filter);
//});
},
mouseupEvent(e) {
var oldvalue = $(“#txtfilter”).val();
if (oldvalue == “”) {
console.log(‘focus Input!’);
return;
}
//// When this event is fired after clicking on the clear button
//// the value is not cleared yet. We have to wait for it.
setTimeout(function () {
var newValue = $(“#txtfilter”).val();
if (newValue == “”) {
//
console.log(‘Clear Input!’);
}
}, 1);
}
}
})
</script>
</body>
the result as below: