Bootstrap "x" search clear button does not work in edge

0
votes

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/

2
javascripttwitter-bootstrapvue.jssearchmicrosoft-edge

2 Answers

0
votes

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 your own "x" which clears input on click.

0
votes

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:

enter image description here