+32
-15
lines changedFilter options
+32
-15
lines changed Original file line number Diff line number Diff line change
@@ -354,7 +354,7 @@ Formatting does not occur if a `formatter` is not provided.
354 354
id="input-formatter"
355 355
v-model="text1"
356 356
placeholder="Enter your name"
357 -
:formatter="format"
357 +
:formatter="formatter"
358 358
></b-form-input>
359 359
</b-form-group>
360 360
<p><b>Value:</b> {{ text1 }}</p>
@@ -370,7 +370,7 @@ Formatting does not occur if a `formatter` is not provided.
370 370
v-model="text2"
371 371
placeholder="Enter your name"
372 372
lazy-formatter
373 -
:formatter="format"
373 +
:formatter="formatter"
374 374
></b-form-input>
375 375
</b-form-group>
376 376
<p class="mb-0"><b>Value:</b> {{ text2 }}</p>
@@ -386,7 +386,7 @@ Formatting does not occur if a `formatter` is not provided.
386 386
}
387 387
},
388 388
methods: {
389 -
format(value, event) {
389 +
formatter(value) {
390 390
return value.toLowerCase()
391 391
}
392 392
}
@@ -270,7 +270,7 @@ Formatting does not occur if a `formatter` is not provided.
270 270
id="textarea-formatter"
271 271
v-model="text1"
272 272
placeholder="Enter your text"
273 -
:formatter="format"
273 +
:formatter="formatter"
274 274
></b-form-textarea>
275 275
</b-form-group>
276 276
<p style="white-space: pre-line"><b>Value:</b> {{ text1 }}</p>
@@ -286,7 +286,7 @@ Formatting does not occur if a `formatter` is not provided.
286 286
v-model="text2"
287 287
placeholder="Enter your text"
288 288
lazy-formatter
289 -
:formatter="format"
289 +
:formatter="formatter"
290 290
></b-form-textarea>
291 291
</b-form-group>
292 292
<p class="mb-0" style="white-space: pre-line"><b>Value:</b> {{ text2 }}</p>
@@ -302,7 +302,7 @@ Formatting does not occur if a `formatter` is not provided.
302 302
}
303 303
},
304 304
methods: {
305 -
format(value, event) {
305 +
formatter(value) {
306 306
return value.toLowerCase()
307 307
}
308 308
}
@@ -67,10 +67,6 @@ export default {
67 67
}
68 68
},
69 69
computed: {
70 -
computedDebounce() {
71 -
// Ensure we have a positive number equal to or greater than 0
72 -
return Math.max(toInteger(this.debounce) || 0, 0)
73 -
},
74 70
computedClass() {
75 71
return [
76 72
{
@@ -98,6 +94,13 @@ export default {
98 94
}
99 95
// Most likely a string value (which could be the string 'true')
100 96
return this.ariaInvalid
97 +
},
98 +
computedDebounce() {
99 +
// Ensure we have a positive number equal to or greater than 0
100 +
return Math.max(toInteger(this.debounce) || 0, 0)
101 +
},
102 +
hasFormatter() {
103 +
return isFunction(this.formatter)
101 104
}
102 105
},
103 106
watch: {
@@ -132,7 +135,7 @@ export default {
132 135
},
133 136
formatValue(value, evt, force = false) {
134 137
value = toString(value)
135 -
if ((!this.lazyFormatter || force) && isFunction(this.formatter)) {
138 +
if (this.hasFormatter && (!this.lazyFormatter || force)) {
136 139
value = this.formatter(value, evt)
137 140
}
138 141
return value
@@ -151,7 +154,6 @@ export default {
151 154
},
152 155
updateValue(value, force = false) {
153 156
const lazy = this.lazy
154 -
const ms = this.computedDebounce
155 157
if (lazy && !force) {
156 158
return
157 159
}
@@ -162,13 +164,28 @@ export default {
162 164
this.vModelValue = value
163 165
this.$emit('update', value)
164 166
}
165 -
if (ms > 0 && !lazy && !force) {
166 -
// Change/Blur/Force will not be debounced
167 -
this.$_inputDebounceTimer = setTimeout(doUpdate, ms)
167 +
const debounce = this.computedDebounce
168 +
// Only debounce the value update when a value greater than `0`
169 +
// is set and we are not in lazy mode or this is a forced update
170 +
if (debounce > 0 && !lazy && !force) {
171 +
this.$_inputDebounceTimer = setTimeout(doUpdate, debounce)
168 172
} else {
169 173
// Immediately update the v-model
170 174
doUpdate()
171 175
}
176 +
} else if (this.hasFormatter) {
177 +
// When the `vModelValue` hasn't changed but the actual input value
178 +
// is out of sync, make sure to change it to the given one
179 +
// Usually caused by browser autocomplete and how it triggers the
180 +
// change or input event, or depending on the formatter function
181 +
// https://github.com/bootstrap-vue/bootstrap-vue/issues/2657
182 +
// https://github.com/bootstrap-vue/bootstrap-vue/issues/3498
183 +
/* istanbul ignore next: hard to test */
184 +
const $input = this.$refs.input
185 +
/* istanbul ignore if: hard to test outof sync value */
186 +
if ($input && value !== $input.value) {
187 +
$input.value = value
188 +
}
172 189
}
173 190
},
174 191
onInput(evt) {
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4