link1233 link1234 link1235 link1236 link1237 link1238 link1239 link1240 link1241 link1242 link1243 link1244 link1245 link1246 link1247 link1248 link1249 link1250 link1251 link1252 link1253 link1254 link1255 link1256 link1257 link1258 link1259 link1260 link1261 link1262 link1263 link1264 link1265 link1266 link1267 link1268 link1269 link1270 link1271 link1272 link1273 link1274 link1275 link1276 link1277 link1278 link1279 link1280 link1281 link1282 link1283 link1284 link1285 link1286 link1287 link1288 link1289 link1290 link1291 link1292 link1293 link1294 link1295 link1296 link1297 link1298 link1299 link1300 link1301 link1302 link1303 link1304 link1305 link1306 link1307 link1308 link1309 link1310 link1311 link1312 link1313 link1314 link1315 link1316 link1317 link1318 link1319 link1320 link1321 link1322 link1323 link1324 link1325 link1326 link1327 link1328 link1329 link1330 link1331 link1332 link1333 link1334 link1335 link1336 link1337 link1338 link1339 link1340 link1341 link1342 link1343 link1344 link1345 link1346 link1347 link1348 link1349 link1350 link1351 link1352 link1353 link1354 link1355 link1356 link1357 link1358 link1359 link1360 link1361 link1362 link1363 link1364 link1365 link1366 link1367 link1368 link1369

[Vue.js] Bootstrap x search clear button does not work in edgeHTML CODE Update

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: