Strange behavior on searchable table

[GabMic]

Overview of the problem

Buefy version: [0.8.6]
Vuejs version: [2.6.10]
OS/Browser: Chrome v78 on windows 10

Description

Searchable table emits a blur event after 1 or 2 chars have been pressed.
Furthermore, if no results are found, the entire table is gone and a page refresh is needed to show the table again.

I am using it as a an attribute on the column itself, like so:

<template slot-scope="columns">
     <b-table-column field="first_name"
      label="first name"
      searchable>
        {{columns.row.first_name}}
    </b-table-column>
</template>

What can be the couse for this behavior?
Thanks.

[timwoelfle]

I'm having the exact same problems.

[yxngl]

The problem happens when using searchable with custom template. Because no column prop is given, internal newColumns are maintained by bTableColumn. When filtering rows, newColumns actually are first all deleted and added back, which will re-render the header and loses focus. When nothing is found, newColumns will be empty and whole header is gone.

Simply disable the beforeDestroy hook of bTableColumn will make searchable work. Not sure if that is actually necessary.

[yxngl]

Ok, I see it is for #833. Need to think about it.

[binary-signal]

I can verify the issue too

[dauriata]

I fixed this issue with the following modifications on the beforeDestroy hook in TableColumn.vue :

if (!this.$parent.visibleData.length) return
if ( this.$parent.$children.filter(vm => vm.$options._componentTag === 'b-table-column' && vm.$data.newKey===this.newKey).length !== 1 ) return

With template scope, column headers are actually deleted and recreated each time a cell is destroyed, this is annoying on searchable columns because the search field loses focus when rows are filtered as it is destroyed and recreated
The first line prevent column headers to disappear when there is no data
The second line only destroys headers when it is the last cell of the column going to be destroyed.
This should keep the availability to dynamically add or remove b-table-column with v-if.

Should I make a PR on that ?
it might break with #1881

[nkmnz]

Have you noticed that pagination stops working after any input into the search field, too?

[GabMic]

Have you noticed that pagination stops working after any input into the search field, too?

yes.