ntohq/buefy-next

Button with custom "tag" property doesn't work anymore when combined with dynamic "disabled" state

Opened this issue · 1 comments

Overview of the problem

Buefy version: 0.1.2
Vuejs version: 3.4.19
OS/Browser: Firefox 122.0.1

Description

If you create a button defined like this:

<b-button
        :disabled="isButtonDisabled"
        :to="{ name: "my-route-name" }"
        tag="router-link"
      >Test Button</b-button

... and the variable isButtonDisabled evaluates to undefined or null first and later changes to some other value, the correct tag, in this case router-link is not applied.

I think it is because of this computed property in this file: https://github.com/ntohq/buefy-next/blob/main/src/components/button/Button.vue#L89

 computedTag() {
            if (this.$attrs.disabled !== undefined && this.$attrs.disabled !== false) {
                return 'button'
            }
            return this.tag
        },

Apparently this.$attrs is not reactive (maybe?), so the computed property will only be evaluated once, thus the tag will never be changed to this.tag but stays at button for all the time.

Steps to reproduce

  1. Create the button as shown above
  2. Set the isButtonDisabled variable to null
  3. Change it to "not null" for example

Expected behavior

The button should get the correct tag (router-link, which changes to a later).

Actual behavior

The button stays at tag button

I have the same problem. The button is always disabled when using the tag with disabled=false:

<b-button tag="router-link" :to="{ name: 'home' }" :disabled="false">Home</b-button>