Skip to content

BFormInput + v-model.number + debounce causes bizarre behavior #2684

Closed
@slbayer

Description

@slbayer

Describe the bug

If you have a BFormInput element with a numeric v-model and a debounce value, the update:model-value event is emitted both on input and on change. This means that if you switch the data element behind the BFormInput, and your cursor is still in the input field, whatever value you had in the form input will be applied to the new data element.

In the reproduction, press the Use first button, then type a number in the field labeled 'Numeric and debounce'; this will fill the nd field of the first entry. Leave your cursor in the input field. Next, press the Use second button. The value from the first entry will be inserted into the nd field of the second entry. This should not happen.

This behavior is limited to the combination of a numeric v-model, a debounce value, and leaving the cursor in the field. If any of these are absent, the behavior is as expected. So, for instance, if you repeat the procedure above, but click outside the input field before you press the Use second button, the value will not be copied. Similarly, if you repeat the procedure above with the 'Numeric, no debounce' or `Nonnumeric, debounce' input fields and you leave your cursor in the field, the value will not be copied.

Reproduction

https://bootstra-vue-next-template-smbzal1m.stackblitz.io

Used Package Manager

npm

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions