title: Bootstrap "x" search clear button does not work in edge
body: <p>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?</p>
  
  <h1>HTML:</h1>
  
  <pre><code>  &lt;div class="input-group search"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;span class="input-group-text"&gt;
          &lt;i class="fa fa-search"&gt;&lt;/i&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;input type='search'
             class="form-control"
             placeholder="Type to filter..."
             v-model="filter"
             @input="performFilter" /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <h1>CODE:</h1>
  
  <pre><code>data: function () {
    return {
      filter: ''
    };
  },
  methods: {
    performFilter() {
      var filter = this.filter.toLowerCase();
      this.objs.forEach(function (obj) {
        obj.visible = obj.name.toLowerCase().includes(filter);
      });
    }
  }
  </code></pre>
  
  <h1>Update:</h1>
  
  <p>Seems its a bug in Edge <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/</a></p>