Merge pull request #3 from darianstlex/bug/fix-click-propagation

Fix Click Propagation

Author: darianstlex

README.md

@@ -145,6 +145,8 @@ $SM-dropDownZIndex: 1;
 
 - **`shouldToggleOnHover: boolean: false`** Toggle drop-down on hover
 
+- **`stopClickPropagation: boolean: false`** Stop Header click event propagation
+
 
 
 #### Labels / Placeholders

catalog/props.md

@@ -43,6 +43,8 @@ lang: js
 
 - **`shouldToggleOnHover: boolean: false`** Toggle drop-down on hover
 
+- **`stopClickPropagation: boolean: false`** Stop Header click event propagation
+
 
 
 #### Labels / Placeholders

package.json

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

src/index.js

@@ -47,6 +47,7 @@ export class MultiSelect extends React.Component {
     resetable: T.bool,
     enableSearch: T.bool,
     hasSelectAll: T.bool,
+    stopClickPropagation: T.bool,
   };
   static defaultProps = {
     mode: MODE.LIST,
@@ -65,6 +66,7 @@ export class MultiSelect extends React.Component {
     resetable: false,
     enableSearch: false,
     hasSelectAll: false,
+    stopClickPropagation: false,
   };
 
   constructor(p) {
@@ -166,9 +168,10 @@ export class MultiSelect extends React.Component {
 
   /**
    * Toggle MultiSelect DropDown
+   * @param event
    * @param value Boolean
    */
-  toggleDropDown = value => {
+  toggleDropDown = (event, value) => {
     const { props: p } = this;
     if (p.disabled || p.isLoading) return;
 
@@ -179,14 +182,16 @@ export class MultiSelect extends React.Component {
         searchText: '',
       } : {}),
     }));
+
+    if (event && p.stopClickPropagation) u.stopPreventPropagation(event);
   };
 
   /**
    * Handle hover to trigger DropDown list
    * @param expanded Boolean
    */
   handleHover = expanded => {
-    if (this.props.shouldToggleOnHover) this.toggleDropDown(expanded);
+    if (this.props.shouldToggleOnHover) this.toggleDropDown(null, expanded);
   };
 
   /**
@@ -215,7 +220,7 @@ export class MultiSelect extends React.Component {
   keyDown = event => {
     const { props: p, state: s } = this;
 
-    if (!s.expanded) this.toggleDropDown(true);
+    if (!s.expanded) this.toggleDropDown(null, true);
     else this.setState(({focusIndex}) => {
       let nextIndex = focusIndex + 1;
 
@@ -238,7 +243,7 @@ export class MultiSelect extends React.Component {
     const { props: p, state: s } = this;
 
     if (s.expanded) {
-      if (s.focusIndex === -2) this.toggleDropDown(false);
+      if (s.focusIndex === -2) this.toggleDropDown(null, false);
       else this.setState(({focusIndex}) => {
         let nextIndex = focusIndex - 1;
 
@@ -269,9 +274,9 @@ export class MultiSelect extends React.Component {
     ({
       [event.which]: () => {},
       8: () => this.clearValue(event), // BackSpace
-      9: () => this.toggleDropDown(false), // Tab
+      9: () => this.toggleDropDown(null, false), // Tab
       27: () => { // Esc
-        this.toggleDropDown(false);
+        this.toggleDropDown(null, false);
         this.handleFocusControl(-2);
         u.stopPreventPropagation(event);
       },
@@ -288,7 +293,7 @@ export class MultiSelect extends React.Component {
    * @param optionValue value string
    */
   select = optionValue => {
-    if (this.isSingle()) this.setState({ value: [optionValue] }, () => this.toggleDropDown(false));
+    if (this.isSingle()) this.setState({ value: [optionValue] }, () => this.toggleDropDown(null,false));
     else this.setState({ value: [...this.state.value, optionValue] });
   };
 
@@ -406,7 +411,7 @@ export class MultiSelect extends React.Component {
           expanded={s.expanded}
           disabled={p.disabled}
           selected={s.focusIndex === -2}
-          onClick={() => this.toggleDropDown()}
+          onClick={this.toggleDropDown}
         >
           <div className={u.classes('Header__value', {
             'Header__value--resetable': p.resetable && (!!s.value.length || !!p.resetTo.length),

src/index.test.js

@@ -276,7 +276,7 @@ describe('MultiSelect', () => {
         wrapper.setProps({ shouldToggleOnHover: true });
         wrapper.instance().handleHover(true);
 
-        expect(toggleDropDown).toHaveBeenCalledWith(true);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, true);
       });
 
       it('should not call toggleDropDown if not shouldToggleOnHover', () => {
@@ -348,7 +348,7 @@ describe('MultiSelect', () => {
       it('should toggle DropDown and call stopPreventPropagation', () => {
         wrapper.instance().keyDown(event);
 
-        expect(toggleDropDown).toHaveBeenCalledWith(true);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, true);
         expect(utils.stopPreventPropagation).toHaveBeenCalledWith(event);
       });
 
@@ -368,7 +368,7 @@ describe('MultiSelect', () => {
         wrapper.setState({ expanded: true, focusIndex: -2 });
         wrapper.instance().keyUp(event);
 
-        expect(toggleDropDown).toHaveBeenCalledWith(false);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, false);
         expect(utils.stopPreventPropagation).toHaveBeenCalledWith(event);
       });
 
@@ -412,10 +412,10 @@ describe('MultiSelect', () => {
         expect(clearValue).toHaveBeenCalledWith({ ...event, which: 8 });
 
         wrapper.instance().handleKeyPress({ ...event, which: 9 });
-        expect(toggleDropDown).toHaveBeenCalledWith(false);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, false);
 
         wrapper.instance().handleKeyPress({ ...event, which: 27 });
-        expect(toggleDropDown).toHaveBeenCalledWith(false);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, false);
         expect(wrapper.instance().headerRef.current.focus).toHaveBeenCalled();
         expect(utils.stopPreventPropagation).toHaveBeenCalledWith({ ...event, which: 27 });
 
@@ -441,7 +441,7 @@ describe('MultiSelect', () => {
         setState.mock.calls[0][1]();
 
         expect(setState.mock.calls[0][0]).toEqual({ value: ['two'] });
-        expect(toggleDropDown).toHaveBeenCalledWith(false);
+        expect(toggleDropDown).toHaveBeenCalledWith(null, false);
       });
     });
 

src/scss/main.scss

@@ -98,7 +98,7 @@
       box-sizing: border-box;
       display: flex;
       flex-direction: row;
-      justify-content: start;
+      justify-content: flex-start;
       align-items: center;
       overflow-x: auto;
       padding-right: 20px;