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

tmorehouse · web-flow · commit 166a932fb11f · 2020-02-08T10:25:44.000-04:00
diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -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
 
@@ -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.
 
diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md
@@ -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
 
diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
@@ -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
         }
@@ -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
@@ -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`
