Skip to content

fix(b-form-input, b-form-textarea): handle change event for all mobile device keyboards (closes #4724) #4739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 8, 2020
Merged

fix(b-form-input, b-form-textarea): handle change event for all mobile device keyboards (closes #4724) #4739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
24cd1fc
fix(b-form-input, b-form-textarea): handle value change due to predic…
tmorehouse Feb 7, 2020
db29d03
Update form-text.js
tmorehouse Feb 7, 2020
a717432
Update README.md
tmorehouse Feb 7, 2020
754997f
Update README.md
tmorehouse Feb 7, 2020
4e9f95c
Update form-text.js
jacobmllr95 Feb 8, 2020
7fe8f41
docs(form-radio): add clarification to v-model section (closes #4736)…
tmorehouse Feb 8, 2020
68ad46a
Merge branch 'dev' into issue/4724
tmorehouse Feb 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/components/form-input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,15 @@ rendered and a console warning will be issued.
- Older version of Firefox may not support `readonly` for `range` type inputs.
- Input types that do not support `min`, `max` and `step` (i.e. `text`, `password`, `tel`, `email`,
`url`, etc) will silently ignore these values (although they will still be rendered on the input
markup) iv values are provided.
markup) if values are provided.

**Caveats with predictive text entry and IME composition entry:**

- When using predictive text auto-suggested words, the `v-model` will not update until the
auto-suggested word is selected (or a space is typed). If an auto suggested word is not selected,
the v-model will update with the current _displayed text_ of the input when the input is blurred.
- When using IME composition (ie. Chinese, Japanese, etc), the `v-model` will not update until the
IME composition is completed.

### Range type input

Expand Down Expand Up @@ -155,7 +163,7 @@ In the example below, we double the number of steps by using step="0.5".
convert the value to a native number by using `Number(value)`, `parseInt(value, 10)`,
`parseFloat(value)`, or use the `number` prop.

**Note:** Bootstrap v4.1 CSS does not include styling for range inputs inside input groups, nor
**Note:** Bootstrap v4 CSS does not include styling for range inputs inside input groups, nor
validation styling on range inputs. However, BootstrapVue includes custom styling to handle these
situations until styling is included in Bootstrap v4.

Expand Down
12 changes: 7 additions & 5 deletions src/components/form-radio/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,14 +251,16 @@ If you want to customize the field property names (for example using `name` fiel

## Radio value and v-model

`<b-form-radio>` and `<b-form-radio-group>` do not have a value by default. You must explicitly
supply a value (to which the `v-model` is set to when the radio is checked) via the `value` prop.
`<b-form-radio>` components do not have a value by default. You must explicitly supply a value via
the `value` prop on `<b-form-radio>`. This value will be sent to the `v-model` when the radio is
checked.

The `v-model` of both `<b-form-radio>` and `<b-form-radio-group>` binds to the `checked` prop. To
pre-check a radio, you must set the `v-model` value to the radio's value. Do not use the `checked`
prop directly.
pre-check a radio, you must set the `v-model` value to the one of the radio's value (i.e. must match
the value of specified on one of the the radio's `value` prop). Do not use the `checked` prop
directly. Each radio in a radio group _must_ have a unique value.

Radio supports values of many types, such as a `string`, `boolean`, `number`, or an `object`.
Radios support values of many types, such as a `string`, `boolean`, `number`, or a plain `object`.

## Inline or stacked radios

Expand Down
9 changes: 2 additions & 7 deletions src/mixins/form-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export default {
// https://github.com/bootstrap-vue/bootstrap-vue/issues/3498
/* istanbul ignore next: hard to test */
const $input = this.$refs.input
/* istanbul ignore if: hard to test outof sync value */
/* istanbul ignore if: hard to test out of sync value */
if ($input && value !== $input.value) {
$input.value = value
}
Expand All @@ -191,6 +191,7 @@ export default {
onInput(evt) {
// `evt.target.composing` is set by Vue
// https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
// TODO: Is this needed now with the latest Vue?
/* istanbul ignore if: hard to test composition events */
if (evt.target.composing) {
return
Expand All @@ -209,12 +210,6 @@ export default {
this.$emit('input', formattedValue)
},
onChange(evt) {
// `evt.target.composing` is set by Vue
// https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
/* istanbul ignore if: hard to test composition events */
if (evt.target.composing) {
return
}
const value = evt.target.value
const formattedValue = this.formatValue(value, evt)
// Exit when the `formatter` function strictly returned `false`
Expand Down