Merge pull request #6 from darianstlex/fix/IE-multiselect-click

IE multi select click fix

Author: darianstlex

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sm-select",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React Multi/Single Select Component",
   "main": "./dist/index.js",
   "module": "./es/index.js",

src/index.js

@@ -79,6 +79,7 @@ export class MultiSelect extends React.Component {
       selectAll: false,
       focusIndex: p.enableSearch ? -1 : -2,
       searchText: '',
+      mouseHover: false,
     };
 
     this.multiSelectRef = React.createRef();
@@ -135,10 +136,10 @@ export class MultiSelect extends React.Component {
   /**
    * Handle click on document, to detect click outside
    */
-  handleDocumentClick = event => {
+  handleDocumentClick = () => {
     if (this.props.disabled) return;
 
-    if (!u.eventPath(event).includes(this.multiSelectRef.current)) {
+    if (!this.state.mouseHover) {
       this.setState({ expanded: false, hasFocus: false });
       u.removeDocumentClickListener(this.handleDocumentClick);
       this.onEvent('onBlur');
@@ -191,6 +192,7 @@ export class MultiSelect extends React.Component {
    * @param expanded Boolean
    */
   handleHover = expanded => {
+    this.setState({ mouseHover: expanded });
     if (this.props.shouldToggleOnHover) this.toggleDropDown(null, expanded);
   };
 

src/index.test.js

@@ -186,16 +186,17 @@ describe('MultiSelect', () => {
 
     describe('handleDocumentClick', () => {
       it('should remove document click listener, set state and call onBlur', () => {
-        wrapper.instance().handleDocumentClick({ path: ['test'] });
+        wrapper.setState({ mouseHover: false });
+        wrapper.instance().handleDocumentClick();
 
         expect(setState).toHaveBeenCalledWith({ expanded: false, hasFocus: false });
         expect(utils.removeDocumentClickListener).toHaveBeenCalledWith(wrapper.instance().handleDocumentClick);
         expect(onEvent).toHaveBeenCalledWith('onBlur');
       });
 
       it('should not remove document click listener, set state and call onBlur if click is internal', () => {
-        wrapper.instance().multiSelectRef.current = 'test';
-        wrapper.instance().handleDocumentClick({ path: ['test'] });
+        wrapper.setState({ mouseHover: true });
+        wrapper.instance().handleDocumentClick();
 
         expect(setState).not.toHaveBeenCalled();
         expect(utils.removeDocumentClickListener).not.toHaveBeenCalled();
@@ -204,7 +205,8 @@ describe('MultiSelect', () => {
 
       it('should not remove document click listener, set state and call onBlur if disabled', () => {
         const wrapper = shallow(<MultiSelect {...props} disabled={true} />);
-        wrapper.instance().handleDocumentClick({ path: ['test'] });
+        wrapper.setState({ mouseHover: true });
+        wrapper.instance().handleDocumentClick();
 
         expect(setState).not.toHaveBeenCalled();
         expect(utils.removeDocumentClickListener).not.toHaveBeenCalled();

src/utils.js

@@ -81,22 +81,3 @@ export const stopPreventPropagation = event => {
   event.stopPropagation();
   event.preventDefault();
 };
-
-/**
- * Calculate element path for browser compatibility
- * @param event.composedPath
- * @param event.path return
- * @param event.target
- * @returns {*}
- */
-export const eventPath = event => {
-  const inPath = (event.composedPath && event.composedPath()) || event.path;
-  const target = event.target;
-
-  if (inPath != null) return (inPath.indexOf(window) < 0) ? inPath.concat(window) : inPath; // safari
-  if (target === window) return [window];
-
-  const getParents = ({parentNode}, memo = []) => parentNode ? getParents(parentNode, memo.concat(parentNode)) : memo;
-
-  return [target].concat(getParents(target), window);
-};