feat: Add onTouchStart for mobile device (#448)

Add onTouchStart for tags and suggestions

Author: gagan876574

__tests__/suggestions.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import { shallow, mount } from 'enzyme';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 import Suggestions from '../src/components/Suggestions';
 import noop from 'lodash/noop';
 import { DEFAULT_LABEL_FIELD } from '../src/components/constants';
@@ -221,4 +221,11 @@ describe('Suggestions', function() {
 
     expect($el.find('.bar').length).to.equal(4);
   });
+
+  test('should trigger the click handler on touchStart', function () {
+    const onTagClickedStub = stub();
+    const $el = mount(mockItem({ handleClick: onTagClickedStub }));
+    $el.find('li').first().simulate('touchStart');
+    expect(onTagClickedStub.calledOnce).to.be.true;
+  });
 });

__tests__/tag.test.js

@@ -107,6 +107,13 @@ describe('Tag', () => {
     expect(spy.calledOnce).to.be.true;
   });
 
+  test('should trigger the tag click handler on touchStart', () => {
+    const onTagClickedStub = sinon.stub();
+    const $el = mount(mockItem({ onTagClicked: onTagClickedStub }));
+    $el.find('span').simulate('touchStart');
+    expect(onTagClickedStub.calledOnce).to.be.true;
+  });
+
   test('should be draggable', () => {
     const root = TestUtils.renderIntoDocument(mockItem());
     const backend = root.getManager().getBackend();

src/components/Suggestions.js

@@ -102,6 +102,7 @@ class Suggestions extends Component {
           <li
             key={i}
             onMouseDown={props.handleClick.bind(null, i)}
+            onTouchStart={props.handleClick.bind(null, i)}
             onMouseOver={props.handleHover.bind(null, i)}
             className={
               i === props.selectedIndex ? props.classNames.activeSuggestion : ''

src/components/Tag.js

@@ -32,7 +32,8 @@ class Tag extends Component {
       className={ClassNames('tag-wrapper', classNames.tag, className)}
       style={{opacity: isDragging ? 0 : 1, 'cursor': canDrag(props) ? 'move' : 'auto'}}
       onClick={props.onTagClicked}
-      onKeyDown={props.onTagClicked}>
+      onKeyDown={props.onTagClicked}
+      onTouchStart={props.onTagClicked}>
       {label}
       <RemoveComponent
         tag={props.tag}