fix(searchBox): handling pasting event with contextual menu.

fixes #467

Author: maxiloc

widgets/search-box/__tests__/search-box-test.js

@@ -168,6 +168,55 @@ describe('search-box()', () => {
     });
   });
 
+  context('input event listenner', () => {
+    let input;
+    beforeEach(() => {
+      container = document.createElement('div');
+      input = createHTMLNodeFromString('<input />');
+      input.addEventListener = sinon.spy();
+    });
+
+    function simulateInputEvent() {
+      // Given
+      helper.state.query = 'foo';
+      // When
+      widget.init(initialState, helper);
+      // Then
+      expect(input.addEventListener.called).toEqual(true);
+      expect(input.addEventListener.args[1].length).toEqual(3);
+      expect(input.addEventListener.args[1][0]).toEqual('input');
+      let fn = input.addEventListener.args[1][1];
+
+      return fn({currentTarget: {value: 'test'}});
+    }
+
+    context('instant search', () => {
+      beforeEach(() => {
+        widget = searchBox({container, autofocus: 'auto'});
+        widget.getInput = sinon.stub().returns(input);
+      });
+
+      it('performs a search on any change', () => {
+        simulateInputEvent();
+        expect(helper.setQuery.calledOnce).toBe(true);
+        expect(helper.search.called).toBe(true);
+      });
+    });
+
+    context('non-instant search', () => {
+      beforeEach(() => {
+        widget = searchBox({container, autofocus: 'auto', searchOnEnterKeyPressOnly: true});
+        widget.getInput = sinon.stub().returns(input);
+      });
+
+      it('does not performs (will be handle by keyup event)', () => {
+        simulateInputEvent();
+        expect(helper.setQuery.calledOnce).toBe(true);
+        expect(helper.search.called).toBe(false);
+      });
+    });
+  });
+
   context('keyup', () => {
     let input;
     beforeEach(() => {
@@ -176,25 +225,30 @@ describe('search-box()', () => {
       input.addEventListener = sinon.spy();
     });
 
+    function simulateKeyUpEvent(args) {
+      // Given
+      helper.state.query = 'foo';
+      // When
+      widget.init(initialState, helper);
+      // Then
+      expect(input.addEventListener.called).toEqual(true);
+      expect(input.addEventListener.args[0].length).toEqual(2);
+      expect(input.addEventListener.args[0][0]).toEqual('keyup');
+      let fn = input.addEventListener.args[0][1];
+
+      return fn(args);
+    }
+
     context('instant search', () => {
       beforeEach(() => {
         widget = searchBox({container, autofocus: 'auto'});
         widget.getInput = sinon.stub().returns(input);
       });
 
-      it('performs the search on keyup', () => {
-        // Given
-        helper.state.query = 'foo';
-        // When
-        widget.init(initialState, helper);
-        // Then
-        expect(input.addEventListener.called).toEqual(true);
-        expect(input.addEventListener.args[0].length).toEqual(2);
-        expect(input.addEventListener.args[0][0]).toEqual('keyup');
-        let fn = input.addEventListener.args[0][1];
-        fn({});
+      it('do not perform the search on keyup event (should be done by input event)', () => {
+        simulateKeyUpEvent({});
         expect(helper.setQuery.calledOnce).toBe(true);
-        expect(helper.search.calledOnce).toBe(true);
+        expect(helper.search.called).toBe(false);
       });
     });
 
@@ -204,32 +258,14 @@ describe('search-box()', () => {
         widget.getInput = sinon.stub().returns(input);
       });
 
-      it('performs the search on <ENTER>', () => {
-        // Given
-        helper.state.query = 'foo';
-        // When
-        widget.init(initialState, helper);
-        // Then
-        expect(input.addEventListener.called).toEqual(true);
-        expect(input.addEventListener.args[0].length).toEqual(2);
-        expect(input.addEventListener.args[0][0]).toEqual('keyup');
-        let fn = input.addEventListener.args[0][1];
-        fn({keyCode: 13});
+      it('performs the search on keyup if <ENTER>', () => {
+        simulateKeyUpEvent({keyCode: 13});
         expect(helper.setQuery.calledOnce).toBe(true);
         expect(helper.search.calledOnce).toBe(true);
       });
 
-      it('doesn\'t perform the search on keyup', () => {
-        // Given
-        helper.state.query = 'foo';
-        // When
-        widget.init(initialState, helper);
-        // Then
-        expect(input.addEventListener.called).toEqual(true);
-        expect(input.addEventListener.args[0].length).toEqual(2);
-        expect(input.addEventListener.args[0][0]).toEqual('keyup');
-        let fn = input.addEventListener.args[0][1];
-        fn({});
+      it('doesn\'t perform the search on keyup if not <ENTER>', () => {
+        simulateKeyUpEvent({});
         expect(helper.setQuery.calledOnce).toBe(true);
         expect(helper.search.calledOnce).toBe(false);
       });

widgets/search-box/search-box.js

@@ -6,6 +6,7 @@ let bem = require('../../lib/utils').bemHelper('ais-search-box');
 let cx = require('classnames');
 
 const KEY_ENTER = 13;
+const KEY_SUPPRESS = 8;
 
 /**
  * Instantiate a searchbox
@@ -100,13 +101,34 @@ function searchBox({
 
       // Add all the needed attributes and listeners to the input
       this.addDefaultAttributesToInput(input, initialState.query);
+
+      // Keep keyup to handle searchOnEnterKeyPressOnly
       input.addEventListener('keyup', (e) => {
         helper.setQuery(input.value);
-        if (!searchOnEnterKeyPressOnly || e.keyCode === KEY_ENTER) {
+        if (searchOnEnterKeyPressOnly && e.keyCode === KEY_ENTER) {
+          helper.search();
+        }
+
+        // IE8/9 compatibility
+        if (window.attachEvent && e.keyCode === KEY_SUPPRESS) {
           helper.search();
         }
       });
 
+      function inputCallback(e) {
+        let target = (e.currentTarget) ? e.currentTarget : e.srcElement;
+        helper.setQuery(target.value);
+        if (!searchOnEnterKeyPressOnly) {
+          helper.search();
+        }
+      }
+
+      if (window.attachEvent) { // IE8/9 compatibility
+        input.attachEvent('onpropertychange', inputCallback);
+      } else {
+        input.addEventListener('input', inputCallback, false);
+      }
+
       if (isInputTargeted) {
         // To replace the node, we need to create an intermediate node
         let placeholderNode = document.createElement('div');