feat(form-input): Added support for datalists to text form-inputs (bootstrap-vue#2781)

Soviut · tmorehouse · commit 0339ad80e462 · 2019-03-06T18:02:19.000-04:00
diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -416,6 +416,48 @@ On some browsers, scrolling the mousewheel while a numeric-like input is focused
 decrement the input's value. To disable this browser feature, just set the `no-wheel` prop to
 `true`.
 
+## Datalist support
+
+Datalists are a native HTML tag `<datalist>` that contains a list of `<option>` tags. By assigning
+an ID to the datalist tag, the list can be references from a text input by adding a `list` 
+attribute.
+
+This gives the input the behavior of a combo box or auto-complete, allowing existing values to be 
+chosen, or new values to be entered.
+
+```html
+<template>
+  <b-form-input list="my-list-id" />
+
+  <datalist id="my-list-id">
+    <option>Manual Option</option>
+    <option v-for="size in sizes">{{ size }}</option>
+  </datalist>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizes: ['Small', 'Medium', 'Large', 'Extra Large']
+      }
+    }
+  }
+</script>
+
+<!-- b-form-input-datalist.vue -->
+```
+
+**Notes:**
+
+- Datalists work in conjunction with the browser's built in auto-complete, displaying datalist
+  options first, followed by auto-complete options. To only display datalist options, set
+  `autocomplete="off"`.
+- Datalists cannot be applied to input fields with `type="password"`.
+- Not all browsers fully support `<datalist>` and implementations can be buggy. It is 
+  recommended that datalists be treated as an enhancement and not be relied upon at this time.
+  Check [Can I Use](https://caniuse.com/#feat=datalist) for full support details on all browsers.
+
 ## `v-model` modifiers
 
 Vue does not officially support `.lazy`, `.trim`, and `.number` modifiers on the `v-model` of custom
diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js
@@ -63,6 +63,10 @@ export default {
     step: {
       type: [String, Number],
       default: null
+    },
+    list: {
+      type: String,
+      default: null
     }
   },
   computed: {
@@ -143,6 +147,7 @@ export default {
         min: self.min,
         max: self.max,
         step: self.step,
+        list: self.localType !== 'password' ? self.list : null,
         'aria-required': self.required ? 'true' : null,
         'aria-invalid': self.computedAriaInvalid
       },
diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js
@@ -124,6 +124,33 @@ describe('form-input', async () => {
     expect(input.attributes('form')).toBe('foobar')
   })
 
+  it('does not have list attribute when list prop not set', async () => {
+    const wrapper = mount(Input)
+    const input = wrapper.find('input')
+    expect(input.attributes('list')).not.toBeDefined()
+  })
+
+  it('has list attribute when list prop set', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        list: 'foobar'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('list')).toBe('foobar')
+  })
+
+  it('does not have list attribute when list prop set and type=password', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        list: 'foobar',
+        type: 'password'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('list')).not.toBeDefined()
+  })
+
   it('renders text input by default', async () => {
     const wrapper = mount(Input)
     const input = wrapper.find('input')
