Issue #89 : reset input on focus out.

docs/.vuepress/components/HomePageDemo.vue

@@ -3,6 +3,7 @@
     <div class="pl-1 pb-2 pt-3">Selected Country: {{query}}</div>
     <vue-typeahead-bootstrap
       :data="['Canada', 'United Kingdom', 'United States', 'Mexico']"
+      :reset-input-on-focus-out="true"
       v-model="query"
       showOnFocus
       placeholder="Choose a country"

docs/guide/reference.md

@@ -4,34 +4,35 @@
 
 | Name | type | Default | Description |
 | ---- |:----:| ------------- | ---- |
-| append | String | | Text to be appended to the `input-group`
-| autoClose | `Boolean` | true | Whether the autocomplete should hide upon item selection
+| append | String | | Text to be appended to the `input-group`.
+| autoClose | `Boolean` | true | Whether the autocomplete should hide upon item selection.
 | backgroundVariant | String | | Background color for the autocomplete result `list-group` items. [See values here.][1]
 | backgroundVariantResolver | Function | input => null | Function which accepts the current list item data and returns a background color for the current autocomplete result `list-group` item. The non-null/non-empty string value returned from this function will supersede the value specified in `backgroundVariant`. 
 | data | Array | | Array of data to be available for querying. **Required**|
-| disabled | `Boolean` | false | Enable or disable input field
+| disabled | `Boolean` | false | Enable or disable input field.
 | disabledValues| `Array` | false | The dropdown items to `disable`.
 | disableSort | `Boolean` | false | If set to true, no sorting occurs and the list is presented to the user as it is given to the component. Use this if you sort the list before giving it to the component. Ex: an elasticsearch result being passed to Vue.
-| highlightClass | `String` | `vbt-matched-text` | CSS class to style highlighted text
-| ieCloseFix | Boolean | true | Adds (imperfect) handling for auto closing the typeahead list on focus out in IE
+| highlightClass | `String` | `vbt-matched-text` | CSS class to style highlighted text.
+| ieCloseFix | Boolean | true | Adds (imperfect) handling for auto closing the typeahead list on focus out in IE.
 | inputClass | String | | Class to be added to the `input` tag for validation, etc.
 | inputName | String | | Name to be added to the `input` tag.
 | maxMatches | Number | 10 | Maximum amount of list items to appear.
-| minMatchingChars | Number | 2 | Minimum matching characters in query before the typeahead list appears
-| prepend | String | | Text to be prepended to the `input-group`
+| minMatchingChars | Number | 2 | Minimum matching characters in query before the typeahead list appears.
+| prepend | String | | Text to be prepended to the `input-group`.
+| resetInputOnFocusOut | Boolean | false | Reset the input on focus out if no selected item in list.
 | screenReaderTextSerializer | Function | `input => input`| Function used to convert the entries in the data array into the screen reader text string. Falls back to the value of serializer.|
 | serializer | Function | `input => input`| Function used to convert the entries in the data array into a text string. |
 | showAllResults | `Boolean` | false | Show all results even ones that highlighting doesn't match. This is useful when interacting with a API that returns results based on different values than what is displayed. Ex: user searches for "USA" and the service returns "United States of America".
 | showOnFocus | `Boolean` | false | Show results as soon as the input gains focus before the user has typed anything.
-| size | String | | Size of the `input-group`. Valid values: `sm`, `md`, or `lg` |
+| size | String | | Size of the `input-group`. Valid values: `sm`, `md`, or `lg`. |
 | textVariant | String | | Text color for autocomplete result `list-group` items. [See values here.][2]
 
 ## Events
 
 Name | Description
 | --- | --- |
 hit | Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned. If no autocomplete item is selected, the first entry matching the query is selected and returned.
-input | The component can be used with `v-model`
+input | The component can be used with `v-model`.
 keyup | Triggered when any keyup event is fired in the input. Often used for catching `keyup.enter`.
 
 ## Slots

src/components/VueTypeaheadBootstrap.vue

@@ -29,7 +29,7 @@
         :value="inputValue"
         :disabled="disabled"
         @focus="isFocused = true"
-        @blur="handleFocusOut"
+        @blur="handleBlur"
         @input="handleInput($event.target.value)"
         @keydown.esc="handleEsc($event.target.value)"
         @keyup="$emit('keyup', $event)"
@@ -57,6 +57,7 @@
       :showAllResults="showAllResults"
       @hit="handleHit"
       @listItemBlur="handleChildBlur"
+      @isSelected="handleIsSelected"
       :highlightClass='highlightClass'
       :disabledValues="disabledValues"
       :vbtUniqueId="id"
@@ -168,7 +169,11 @@ export default {
     placeholder: String,
     prepend: String,
     append: String,
-    highlightClass: String
+    highlightClass: String,
+    resetInputOnFocusOut: {
+      type: Boolean,
+      default: false
+    }
   },
 
   computed: {
@@ -195,9 +200,9 @@ export default {
   },
 
   methods: {
-    _screenReaderTextSerializer(d){
-      if ( typeof d === "object" && !Array.isArray(d) && d !== null){
-       if (this.screenReaderTextSerializer){
+    _screenReaderTextSerializer(d) {
+      if (typeof d === 'object' && !Array.isArray(d) && d !== null) {
+        if (this.screenReaderTextSerializer) {
           return this.screenReaderTextSerializer(d)
         } else {
           return this.serializer(d)
@@ -256,6 +261,21 @@ export default {
       }
     },
 
+    handleIsSelected() {
+      this.isSelected = true
+    },
+
+    handleResetInputOnFocusOut() {
+      if (this.resetInputOnFocusOut && !this.isFocused && !this.isSelected) {
+        this.inputValue = ''
+      }
+    },
+
+    handleBlur(evt) {
+      this.handleFocusOut(evt)
+      this.handleResetInputOnFocusOut()
+    },
+
     handleInput(newValue) {
       this.isFocused = true
       this.inputValue = newValue
@@ -279,7 +299,8 @@ export default {
   data() {
     return {
       isFocused: false,
-      inputValue: this.value || ''
+      inputValue: this.value || '',
+      isSelected: false
     }
   },
 
@@ -298,6 +319,10 @@ export default {
   watch: {
     value: function(val) {
       this.inputValue = val
+
+      if (val === '' || !this.data.includes(val)) {
+        this.isSelected = false
+      }
     }
   }
 }

src/components/VueTypeaheadBootstrapList.vue

@@ -180,7 +180,7 @@ export default {
     },
     hitActiveListItem() {
       if (this.activeListItem < 0) {
-        this.selectNextListItem();
+        this.selectNextListItem()
       }
       if (this.activeListItem >= 0) {
         this.$emit('hit', this.matchedItems[this.activeListItem])

src/components/VueTypeaheadBootstrapListItem.vue

@@ -7,6 +7,7 @@
     @keyup.down="$parent.selectNextListItem($event)"
     @keyup.up="$parent.selectPreviousListItem($event)"
     @blur="processFocusOut"
+    @click="$emit('isSelected')"
     tabindex="0"
     href="#"
     :class="textClasses"

tests/unit/VueTypeaheadBootstrap.spec.js

@@ -3,6 +3,7 @@
 import { mount } from '@vue/test-utils'
 import VueTypeaheadBootstrap from '@/components/VueTypeaheadBootstrap.vue'
 import VueTypeaheadBootstrapList from '@/components/VueTypeaheadBootstrapList.vue'
+import VueTypeaheadBootstrapListItem from '@/components/VueTypeaheadBootstrapListItem'
 
 describe('VueTypeaheadBootstrap', () => {
   let wrapper
@@ -126,6 +127,28 @@ describe('VueTypeaheadBootstrap', () => {
     expect(child.isVisible()).toBe(false)
   })
 
+  it('Reset input on focus out', async () => {
+    wrapper = mount(VueTypeaheadBootstrap, {
+      propsData: {
+        data: demoData,
+        resetInputOnFocusOut: true
+      }
+    })
+    wrapper.setData({ inputValue: 'Can' })
+
+    let child = wrapper.findComponent(VueTypeaheadBootstrapList)
+
+    wrapper.find('input').trigger('focus')
+    await wrapper.vm.$nextTick()
+    expect(child.isVisible()).toBe(true)
+
+    wrapper.find('input').trigger('blur')
+    await wrapper.vm.$nextTick()
+    expect(child.isVisible()).toBe(false)
+
+    expect(wrapper.find('input').element.value).toBe('')
+  })
+
   it('Renders the list in different sizes', () => {
     expect(wrapper.vm.inputGroupClasses).toBe('input-group')
     wrapper.setProps({