Textfield stays "disabled" if Vue ref changes

[derwaldgeist]

What is affected?

Component

Description

We were using ^1.4.1 of the textfield so far, but this also applies to the more recent "^2.4.1".

If we set the disabled flag to a Vue ref, it will be disabled, even if the underlying Vue ref starts with false:

<md-outlined-text-field
                ref="inputElement"
                class="prompt-input"
                :disabled="store.busy"
                type="textarea"
                :label="t('Viewer.prompt', store.locale)"
                :placeholder="t('Viewer.prompt', store.locale)"
                @keydown="checkEnterKey"
/>

It would only flip to "enabled" if some later user activity flips the value again.

Only if we remove :disabled, the input field will start as "enabled".

Interestingly, flipping the disabled flag had worked fine for months, but now shows this weird behaviour.

Reproduction

The input field should recognize the "disabled" flag as it has been set by Vue.

Workaround

Removing "disabled" altogether.

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

1.4.1, 2.4.1

Browser/OS/Node environment

Browser: Chrome 142.0.7444.177 (Official Build) (arm64)
OS: macOS Sequoia

[derwaldgeist]

Another workaround is to only show the textfield when the component has been initalized using v-if and the initial state of the disabled flag has already turned to "false". So this only happens if the initial state is "disabled" and the component changes that after its initalization.