Problem with table headers and dates moving from 0.9.25 to 0.9.27

[Verdoso]

Hi there,
Due to a misconfiguration on my side, I had specified the buefy version starting with ^ so the app "upgraded" automatically, I found out that there is some change in the 0.9.27 version that breaks the UI without any error, log, trace or clue what's going on.
The symptoms I have sees so far are that table header search boxes and data pickers are broken.
For example:
0.9.25

0.9.27

0.9.25

0.9.27

This is just changing "buefy": "0.9.25", to "buefy": "0.9.27".
I can see there are some changes in the DOM in the headers, for example:
0.9.25

0.9.27

The table header itself is defined as follows:

            <b-table-column field="formattedCodi" label="Codi" width="8%" cell-class="alignRight" sortable searchable>
              <template #searchable="props">
                <b-input
                  v-model="props.filters[props.column.field]"
                  placeholder="autor..."
                  @change.native="changedFilter"
                />
              </template>

So maybe there are some incompatibilities or other libraries to upgrade that I'm not aware of, I did not see anything about having to upgrade anything else in the changelog.
Anybody has seen this also? Any clue on what might be happening?
Also, a warning for those of you using 0.9.2X and do not specify ONE version, you might run into the same issue so be careful 😄

Cheers!
D.

Buefy version: 0.9.27
Vuejs version: 2.6.12
AFAIK All OS/All browsers:

[kikuomax]

@Verdoso I think the following PR that I made could have caused the problem.

• Horizontal scrollable table ignores column width (#3726) #3937

I will do some investigation.

[kikuomax]

@Verdoso Could you share the full table markup?

[Verdoso]

Hi there,
I've reduced the minimum sample where I see the behaviour to:

        <b-table
             ref="table"
            :data="[
                    { 'code': 1},
                    { 'code': 2},
                    { 'code': 3},
                    { 'code': 4},
                    { 'code': 5}
                ]"
            :paginationSimple="true"
            :paginated="true"
            :pagination-position="'top'"
            :per-page="10"
            >

            <b-table-column field="code" label="Code">
              <template v-slot="props">
                {{ props.row.code }}
              </template>
            </b-table-column>
        </b-table>

With this table, the way to see the problem is that the pagination is gone and replaced with an "undefined".

0.9.27

versus 0.9.25

Cheers!
D.
PD: Just in case you were wondering, the "Tots" select is a component outside the table placed there with CSS. I have tested it without the component and the behaviours is the same.

[Verdoso]

Seeing that more things are being affected, I'm not sure the PR is the cause of everything, because date selectors and the pagination are also affected. The problem with the size of the search boxes, I think it is, because due to the PR, when you define in the table-column width="8%", the percent of the size is being applied twice:

But it doesn't look like the other issues might be caused by that alone.
🤷‍♂️

[kikuomax]

@Verdoso I found that the problem that the pagination control became undefined depended on Vue version.
Vue v2.6.12:

Vue v2.7.16

I will continue the investigation.

[kikuomax]

I found the pagination control error likely depended on the Vue template compiler that the bundler of Buefy was using.
I got the pagination control undefined if Buefy was built with vue@2.7.0 + vue-template-compiler@2.7.0.
I got the pagination control working if Buefy was built with vue@2.6.14 + vue-template-compiler@2.6.14

[kikuomax]

I found the codes generated around the pagination control in the Table component were slightly different. Maybe, Vue@2.6.x does not like a function given to the second argument of _vm._t?

vue-template-compiler@2.7.0:

_vm._t("pagination",function(){return [_c('b-table-pagination',_vm._b({attrs:{"per-page":_vm.perPage,"paginated":_vm.paginated,"rounded":_vm.paginationRounded,"icon-pack":_vm.iconPack,"total":_vm.newDataTotal,"current-page":_vm.newCurrentPage,"aria-next-label":_vm.ariaNextLabel,"aria-previous-label":_vm.ariaPreviousLabel,"aria-page-label":_vm.ariaPageLabel,"aria-current-label":_vm.ariaCurrentLabel,"page-input":_vm.pageInput,"pagination-order":_vm.paginationOrder,"page-input-position":_vm.pageInputPosition,"debounce-page-input":_vm.debouncePageInput},on:{"update:currentPage":function($event){_vm.newCurrentPage=$event;},"update:current-page":function($event){_vm.newCurrentPage=$event;},"page-change":function (event) { return _vm.$emit('page-change', event); }}},'b-table-pagination',_vm.$attrs,false),[_vm._t("top-left")],2)]})

vue-template-compiler@2.6.14:

_vm._t("pagination",[_c('b-table-pagination',_vm._b({attrs:{"per-page":_vm.perPage,"paginated":_vm.paginated,"rounded":_vm.paginationRounded,"icon-pack":_vm.iconPack,"total":_vm.newDataTotal,"current-page":_vm.newCurrentPage,"aria-next-label":_vm.ariaNextLabel,"aria-previous-label":_vm.ariaPreviousLabel,"aria-page-label":_vm.ariaPageLabel,"aria-current-label":_vm.ariaCurrentLabel,"page-input":_vm.pageInput,"pagination-order":_vm.paginationOrder,"page-input-position":_vm.pageInputPosition,"debounce-page-input":_vm.debouncePageInput},on:{"update:currentPage":function($event){_vm.newCurrentPage=$event;},"update:current-page":function($event){_vm.newCurrentPage=$event;},"page-change":function (event) { return _vm.$emit('page-change', event); }}},'b-table-pagination',_vm.$attrs,false),[_vm._t("top-left")],2)])

[kikuomax]

It seems to work both on Vue 2.6.x and 2.7.x if components are built with vue-template-compiler@2.6.x.

[Verdoso]

I see, nice work digging it.

It would seem that passing a function that returns an array does not work whereas passing the array directly does. Is that an issue with how Buefy constructs things? Or is that a bug in vue-template-compiler? Meaning, is that something that Buefy can solve or will it depend on vue-template-compiler fixing something?

Not every component is broken, so maybe there is something in those components (pagination,date picker) that causes the template compiler to work differently.

[kikuomax]

@Verdoso I found this comment of a Vue core team member, which also answers your question:

This is expected: templates compiled with version 2.x.y can only be used with version 2.x.y or superior. In other words, your user must use the latest Vue too.

It means Buefy has to stick to vue-template-compiler@2.6.11 since the current minimum requirement for Vue is v2.6.11. We bumped vue-template-compiler to v2.7.15 in Buefy v0.9.27 but that was wrong. I will revert it.

[Verdoso]

Cool!

[kikuomax]

@Verdoso I am also working on the other issue where column widths were doubly applied. Here is my test component:

<template>
    <div class="container is-max-desktop">
        <b-table
            :data="data"
            :paginationSimple="true"
            :paginated="true"
            :pagination-position="'top'"
            :per-page="10"
        >
            <b-table-column
                field="code"
                label="Code"
                width="10%"
                sortable
                searchable
                numeric
            >
                <template v-slot="props">
                    {{ props.row.code }}
                </template>
            </b-table-column>
            <b-table-column
                field="name"
                label="Name"
                width="20%"
                sortable
                searchable
            >
                <template v-slot="props">
                    {{ props.row.name }}
                </template>
            </b-table-column>
            <b-table-column field="email" label="Email" sortable searchable>
                <template v-slot="props">
                    {{ props.row.email }}
                </template>
            </b-table-column>
        </b-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { code: 1, name: 'John Doe', email: 'johndoe@example.com' },
                { code: 2, name: 'Jane Doe', email: 'janedoe@example.com' },
                { code: 3, name: 'John Smith', email: 'johnsmith@example.com' },
                { code: 4, name: 'Jane Smith', email: 'janesmith@example.com' },
                { code: 5, name: 'Jack Daniel', email: 'jackdaniel@example.com' }
            ]
        }
    }
}
</script>

I got this before my fix (v0.9.27):

I got this after my fix (will be v0.9.28):

FYI: with v0.9.25: