feat(b-form-tags): new option to specify input type (closes #4644) (#4645)

tmorehouse · jacobmllr95 · web-flow · commit b899faceb4c1 · 2020-01-22T09:43:29.000-04:00
Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
@@ -320,6 +320,7 @@ The default slot scope properties are as follows:
 | ------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `tags`             | Array                    | Array of current tag strings                                                                                                                           |
 | `inputAttrs`       | Object                   | Object of attributes to apply to the new tag input element via `v-bind="inputAttrs"`. See below for details                                            |
+| `inputType`        | String                   | <span class="badge badge-secondary">v2.3.0+</span> Type of input to render (normalized version of prop `input-type`)                                   |
 | `inputHandlers`    | Object                   | Object of event handlers to apply to the new tag input element via `v-on="inputHandlers"`. See below for details                                       |
 | `removeTag`        | Function                 | Method to remove a tag. Accepts one argument which is the tag value to remove                                                                          |
 | `addTag`           | Function                 | Method to add a new tag. Assumes the tag is the value of the input, but optionally accepts one argument which is the tag value to be added             |
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -16,10 +16,14 @@ import { BFormInvalidFeedback } from '../form/form-invalid-feedback'
 import { BFormText } from '../form/form-text'
 import { BButton } from '../button/button'
 
+// --- Constants ---
+
 const NAME = 'BFormTags'
 
-// --- Pre-compiled regular expressions for performance reasons ---
+// Supported input types (for built in input)
+const TYPES = ['text', 'email', 'tel', 'url', 'number']
 
+// Pre-compiled regular expressions for performance reasons
 const RX_SPACES = /[\s\uFEFF\xA0]+/g
 
 // --- Utility methods ---
@@ -90,6 +94,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       type: String,
       default: null
     },
+    inputType: {
+      type: String,
+      default: 'text',
+      validator: type => arrayIncludes(TYPES, type)
+    },
     inputClass: {
       type: [String, Array, Object],
       default: null
@@ -181,6 +190,10 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     computedInputId() {
       return this.inputId || this.safeId('__input__')
     },
+    computedInputType() {
+      // We only allow certain types
+      return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
+    },
     computedInputAttrs() {
       return {
         // Merge in user supplied attributes
@@ -469,6 +482,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       tags,
       addTag,
       removeTag,
+      inputType,
       inputAttrs,
       inputHandlers,
       inputClass,
@@ -541,7 +555,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         attrs: {
           ...inputAttrs,
           'aria-describedby': ariaDescribedby || null,
-          type: 'text',
+          type: inputType,
           placeholder: placeholder || null
         },
         domProps: { value: inputAttrs.value },
@@ -660,6 +674,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       // Methods
       removeTag: this.removeTag,
       addTag: this.addTag,
+      // We don't include this in the attrs, as users may want to override this
+      inputType: this.computedInputType,
       // <input> v-bind:inputAttrs
       inputAttrs: this.computedInputAttrs,
       // <input> v-on:inputHandlers
diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js
@@ -132,6 +132,7 @@ describe('form-tags', () => {
 
     expect($input.exists()).toBe(true)
     expect($input.element.value).toBe('')
+    expect($input.element.type).toBe('text')
 
     $input.element.value = 'pear'
     $input.trigger('input')
diff --git a/src/components/form-tags/package.json b/src/components/form-tags/package.json
@@ -34,6 +34,11 @@
             "prop": "inputAttrs",
             "description": "Additional attributes to apply to the new tag input element"
           },
+          {
+            "prop": "inputType",
+            "version": "2.3.0",
+            "description": "Specifies the type of input to use: 'text', 'email', 'tel', 'url', or 'number'. Default is 'text'"
+          },
           {
             "prop": "addButtonText",
             "description": "Text for the built in 'Add' button. Slot `add-button-text' takes precedence"
@@ -115,6 +120,11 @@
                 "type": "Object",
                 "description": "Object of event handlers to apply to native input elements via 'v-on=\"inputHandlers\"'"
               },
+              {
+                "prop": "inputType",
+                "version": "2.3.0",
+                "description": "The type of input to use: 'type', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop"
+              },
               {
                 "prop": "inputId",
                 "type": "String",
