question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<b-form-input> becoming out of sync with value if using formatter

See original GitHub issue

When a form-input has a formatter on it stripping out characters in the case of trying to only allowing numerial values in a text input, the input value can sometimes not match up with the emitted value.

codepen: https://codepen.io/Kalvens/pen/Lqabrj (type any nonnumerical character in the input) browser: Chrome Version 69.0.3497.100 (Official Build) (64-bit) OS: linux

I believe the issue comes from https://github.com/bootstrap-vue/bootstrap-vue/blob/a14245cc27751e395f34b90fba20db16869a3484/src/mixins/form-text.js#L107-L123

the value is already formatted at that point so if the formatter strips out all of the characters leaving the value to be an empty string, nothing will happen even though the input still has a value set for it

I was playing around with your source code and doing

if (this.localValue !== value) {
    ...
} else if (this.$el.value !== value)  {
  this.$el.value = value;
}

seems to fix my issue, but I am not sure if that would be affecting anything else using the mixin.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:17 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
kalvenschrautcommented, May 8, 2019

This has not been released yet, it will when @tmorehouse is done preparing the next release candidate. https://github.com/bootstrap-vue/bootstrap-vue/pull/3168

0reactions
nevadavidcommented, Feb 4, 2020

@tmorehouse I created a new issue: #4724

Read more comments on GitHub >

github_iconTop Results From Across the Web

b-form-input formatter not formatting number - vue.js
You need to split the string and join them with comma. methods: { numberFormat(value) { return value.replace(/,/g, '').split('').join(',') } }.
Read more >
Table | Components - BootstrapVue
Boolean has no effect if the field does not have a formatter . Optionally accepts a formatter function reference to format the value...
Read more >
bootstrap-vue | Yarn - Package Manager
Important: This documentation covers modern versions of Yarn. For 1.x docs, see classic.yarnpkg.com. Yarn. ≡. Home · Getting started.
Read more >
Form Input Bindings - Vue.js
If you want to respond to these updates as well, use your own input event listener and value binding instead of using v-model...
Read more >
node_modules/bootstrap-vue/CHANGELOG.md - GitLab
$bvToast,$bvModal: ensure values passed to slots are arrays for Vue.js 2.5.x ... b-form-input: properly handle out-of-sync values (closes #2657) (#3172 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found