feat(listeners): add support for native listeners

* feat(listeners): added transparent wrappers and deprecated inputProps.onClick, onBlur, onFocus. users can now use native @keyup.tab @Focus @blur etc on root vue-autosuggest component to bind native events to the input.
* docs(1.4.0): version bump, readme update
* style(code): prettier semi and double quotes addedwq
* packages(vue): upgraded packages vue, vue-test-utils etc.

From #31 #34

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   rules: {
     // override/add rules' settings here
     "vue/valid-v-if": "error",
-    "no-console": 1
+    "no-console": ["warn", { allow: ["warn", "error"] }]
   },
   parserOptions: {
     parser: "babel-eslint",

.prettierrc.js

@@ -1,4 +1,6 @@
 // .prettierrc.js
 module.exports = {
-  printWidth: 100
+  printWidth: 100,
+  singleQuote: false,
+  semi: true
 };

__tests__/__snapshots__/autosuggest.test.js.snap

@@ -16,7 +16,6 @@ exports[`Autosuggest can click outside document to trigger close 1`] = `
          aria-expanded="false"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value="G"
@@ -44,7 +43,6 @@ exports[`Autosuggest can display section header 1`] = `
          aria-expanded="true"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value="G"
@@ -123,7 +121,6 @@ exports[`Autosuggest can mount 1`] = `
          aria-expanded="false"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value
@@ -135,6 +132,55 @@ exports[`Autosuggest can mount 1`] = `
 
 `;
 
+exports[`Autosuggest can render default suggestion value by property name 1`] = `
+
+<div id="autosuggest"
+     data-server-rendered="true"
+>
+  <input name="q"
+         type="text"
+         autocomplete="off"
+         role="combobox"
+         aria-autocomplete="list"
+         aria-owns="autosuggest__results"
+         aria-activedescendant="autosuggest__results_item-0"
+         aria-haspopup="true"
+         aria-expanded="true"
+         id="autosuggest__input"
+         initialvalue
+         oninputchange="function onInputChange() {}"
+         placeholder="Type 'G'"
+         onblur="function blurred() {
+                mockFn();
+              }"
+         onfocus="function focused() {
+                mockFn();
+              }"
+         value="Frodo"
+         class="form-control autosuggest__input-open cool-class"
+  >
+  <div class="autosuggest__results-container">
+    <div aria-labelledby="autosuggest"
+         class="autosuggest__results"
+    >
+      <ul role="listbox"
+          aria-labelledby="autosuggest"
+      >
+        <li role="option"
+            data-suggestion-index="0"
+            data-section-name="default"
+            id="autosuggest__results_item-0"
+            class="autosuggest__results_item"
+        >
+          undefined
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+`;
+
 exports[`Autosuggest can render simplest component with single onSelected 1`] = `
 
 <div id="autosuggest"
@@ -346,9 +392,11 @@ exports[`Autosuggest can render suggestions 1`] = `
          aria-expanded="true"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
+         onclick="function clicked() {
+        mockFn();
+      }"
          value="clifford kits"
          class="form-control autosuggest__input-open"
   >
@@ -422,7 +470,6 @@ exports[`Autosuggest can select from suggestions using keystroke 1`] = `
          aria-expanded="false"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value="G"
@@ -450,7 +497,6 @@ exports[`Autosuggest can use escape key to exit 1`] = `
          aria-expanded="false"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value="G"
@@ -478,7 +524,6 @@ exports[`Autosuggest is aria complete 1`] = `
          aria-expanded="true"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
          value="phonics"
@@ -538,7 +583,7 @@ exports[`Autosuggest is aria complete 1`] = `
 
 `;
 
-exports[`Autosuggest onBlur and onFocus work as expected 1`] = `
+exports[`Autosuggest onBlur and onFocus work as expected, including deprecation warnings 1`] = `
 
 <div id="autosuggest"
      data-server-rendered="true"
@@ -554,11 +599,14 @@ exports[`Autosuggest onBlur and onFocus work as expected 1`] = `
          aria-expanded="true"
          id="autosuggest__input"
          initialvalue
-         onclick="function onClick() {}"
          oninputchange="function onInputChange() {}"
          placeholder="Type 'G'"
-         onblur="function blurred() {mockFn();}"
-         onfocus="function focused() {mockFn();}"
+         onblur="function blurred() {
+                mockFn();
+              }"
+         onfocus="function focused() {
+                mockFn();
+              }"
          value="G"
          class="form-control autosuggest__input-open"
   >

__tests__/autosuggest.test.js

@@ -1,4 +1,4 @@
-import { mount, shallow } from "vue-test-utils";
+import { mount, shallow } from "@vue/test-utils";
 import { createRenderer } from "vue-server-renderer";
 
 import Autosuggest from "../src/Autosuggest.vue";
@@ -47,7 +47,6 @@ describe("Autosuggest", () => {
     inputProps: {
       id,
       initialValue: "",
-      onClick: () => {},
       onInputChange: () => {},
       placeholder: "Type 'G'"
     },
@@ -59,9 +58,14 @@ describe("Autosuggest", () => {
     }
   };
 
+  const defaultListeners = {
+    click: () => {}
+  };
+
   it("can mount", () => {
     const props = Object.assign({}, defaultProps);
     props.inputProps = Object.assign({}, defaultProps.inputProps);
+
     props.suggestions = [filteredOptions[0]];
 
     const wrapper = shallow(Autosuggest, {
@@ -76,8 +80,23 @@ describe("Autosuggest", () => {
   });
 
   it("can render suggestions", () => {
+    const props = Object.assign({}, defaultProps);
+    props.inputProps = Object.assign({}, defaultProps.inputProps);
+
+    // Testing deprecation of onClick
+    const mockFn = jest.fn();
+    const mockConsole = jest.fn();
+    console.warn = mockConsole;
+
+    const clicked = () => {
+      mockFn();
+    };
+
+    props.inputProps.onClick = clicked;
+
     const wrapper = mount(Autosuggest, {
-      propsData: defaultProps
+      propsData: props,
+      attachToDocument: true
     });
 
     const input = wrapper.find("input");
@@ -93,21 +112,41 @@ describe("Autosuggest", () => {
 
     const renderer = createRenderer();
     renderer.renderToString(wrapper.vm, (err, str) => {
-      if (err) {
-        return false;
-      }
+      if (err) throw new Error(err);
       expect(str).toMatchSnapshot();
+      expect(mockFn).toHaveBeenCalledTimes(1); // deprecation warning
     });
   });
 
   it("can use escape key to exit", async () => {
     const wrapper = mount(Autosuggest, {
-      propsData: defaultProps
+      propsData: defaultProps,
+      listeners: defaultListeners
     });
 
     const input = wrapper.find("input");
     input.trigger("click");
     wrapper.setData({ searchInput: "G" });
+
+    input.trigger("keydown.up"); // Check it doesn't offset the selection by going up first when nothing is selected.
+
+    // TODO: test these keys are actually returning early.
+    input.trigger("keydown", {
+      keyCode: 16 // Shift
+    });
+    input.trigger("keydown", {
+      keyCode: 9 // Tab
+    });
+    input.trigger("keydown", {
+      keyCode: 18 // alt/option
+    });
+    input.trigger("keydown", {
+      keyCode: 91 // OS Key
+    });
+    input.trigger("keydown", {
+      keyCode: 93 // Right OS Key
+    });
+
     input.trigger("keydown.down");
 
     expect(wrapper.findAll(`ul li`).length).toBeLessThanOrEqual(
@@ -163,6 +202,7 @@ describe("Autosuggest", () => {
 
     const wrapper = mount(Autosuggest, {
       propsData: props,
+      listeners: defaultListeners,
       attachToDocument: true
     });
 
@@ -194,6 +234,7 @@ describe("Autosuggest", () => {
     };
     const wrapper = mount(Autosuggest, {
       propsData: props,
+      listeners: defaultListeners,
       attachToDocument: true
     });
 
@@ -293,11 +334,20 @@ describe("Autosuggest", () => {
     });
   });
 
-  it("onBlur and onFocus work as expected", async () => {
+  it("onBlur and onFocus work as expected, including deprecation warnings", async () => {
     let props = Object.assign({}, defaultProps);
+
     const mockFn = jest.fn();
-    const blurred = () => {mockFn()};
-    const focused = () => {mockFn()};
+    const mockConsole = jest.fn();
+
+    console.warn = mockConsole;
+
+    const blurred = () => {
+      mockFn();
+    };
+    const focused = () => {
+      mockFn();
+    };
 
     props.inputProps.onBlur = blurred;
     props.inputProps.onFocus = focused;
@@ -323,6 +373,43 @@ describe("Autosuggest", () => {
       }
       expect(str).toMatchSnapshot();
     });
+
     expect(mockFn).toHaveBeenCalledTimes(2);
+    expect(mockConsole).toHaveBeenCalledTimes(2); // onBlur and onFocus deprecation warnings
+  });
+
+  it("can render default suggestion value by property name", async () => {
+    const props = Object.assign({}, defaultProps);
+    props.inputProps = Object.assign({}, defaultProps.inputProps);
+    props.inputProps.class = "cool-class";
+    props.suggestions = [
+      {
+        data: [
+          { id: 1, name: "Frodo", avatar: "https://upload.wikimedia.org/wikipedia/en/4/4e/Elijah_Wood_as_Frodo_Baggins.png" }
+        ]
+      }
+    ];
+
+    props.onSelected = () => {};
+
+    const wrapper = mount(Autosuggest, {
+      propsData: props,
+      attachToDocument: true
+    });
+
+    const input = wrapper.find("input");
+    input.trigger("click");
+    wrapper.setData({ searchInput: "F" });
+
+    input.trigger("keydown.down");
+    input.trigger("keydown.enter");
+
+    const renderer = createRenderer();
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      if (err) {
+        return false;
+      }
+      expect(str).toMatchSnapshot();
+    });
   });
 });

docs/App.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
+    <h1>🔍 Vue-autosuggest</h1>
     <div style="padding-top:10px; margin-bottom: 10px;"><span v-if="selected">You have selected {{selected}}</span></div>
     <div>
     <vue-autosuggest 
               :suggestions="filteredOptions"
               :input-props="inputProps"
               :section-configs="sectionConfigs"
               :getSuggestionValue="getSuggestionValue"
-              ref="autocomplete"
-          />
+              @focus="focusMe"
+              ref="autocomplete" />
     </div>
   </div>
 </template>
@@ -88,13 +89,7 @@ export default {
         id: "autosuggest__input",
         onClick: () => {},
         onInputChange: this.onInputChange,
-        placeholder: "Type 'g'",
-        onBlur: () => {
-          // console.log(e);
-        },
-        onFocus: () => {
-          // console.log(e);
-        }
+        placeholder: "Type 'g'"
       }
     };
   },
@@ -130,6 +125,9 @@ export default {
       } else {
         return item.item;
       }
+    },
+    focusMe(e){
+      // console.log(e)
     }
   }
 };