Fixes #49 fix console error by letting event bubble to helper function

.gitignore

@@ -2,10 +2,10 @@
 .idea
 node_modules
 npm-debug.log
-lib
 .directory
 .DS_Store
 package-lock.json
+lib
 
 *-lock.*
 *.lock*

src/Components/svg/CircleIcon.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactSvgIcon, { disabledColor } from './ReactSvgIcon/index';
 
-const DropDownIcon = ({ handleClick }) => (
-	<ReactSvgIcon handleClick={handleClick} className="SvgIconCircleIcon">
+const DropDownIcon = (props) => (
+	<ReactSvgIcon {...props} className="SvgIconCircleIcon">
 		<path
 			fill={disabledColor}
 			d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M256,456c-110.5,0-200-89.5-200-200S145.5,56,256,56s200,89.5,200,200S366.5,456,256,456z"

src/Components/svg/CircleIconChecked.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactSvgIcon, { enabledColor } from './ReactSvgIcon/index';
 
-const DropDownIcon = ({ handleClick }) => (
-	<ReactSvgIcon handleClick={handleClick} className="SvgIconCircleIconChecked">
+const DropDownIcon = (props) => (
+	<ReactSvgIcon {...props} className="SvgIconCircleIconChecked">
 		<path
 			fill={enabledColor}
 			d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M396.1,203.2L223.5,374.4c-4.7,4.7-12.3,4.6-17-0.1l-90.8-91.5c-4.7-4.7-4.6-12.3,0.1-17l22.7-22.5c4.7-4.7,12.3-4.6,17,0.1l59.8,60.3l141.4-140.2c4.7-4.7,12.3-4.6,17,0.1l22.5,22.7C400.9,191,400.8,198.6,396.1,203.2z"

src/Components/svg/DropDownIcon.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactSvgIcon, { enabledColor } from './ReactSvgIcon/index';
 
-const DropDownIcon = ({ handleClick }) => (
-	<ReactSvgIcon handleClick={handleClick} className="SvgIconDropDownIcon">
+const DropDownIcon = (props) => (
+	<ReactSvgIcon {...props} className="SvgIconDropDownIcon">
 		<path
 			fill={enabledColor}
 			d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"

src/Components/svg/ReactSvgIcon/index.jsx

@@ -6,18 +6,12 @@ export const disabledColor = '#d1d3d4';
 export const enabledColor = '#45b3e3';
 
 const ReactSvgIcon = (props = {}) => {
-	const { width, height, children, handleClick, ...restProps } = props;
-
-	const onClick = e => {
-		e.stopPropagation();
-		return handleClick();
-	};
+	const { width, height, children, ...restProps } = props;
 
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			xmlnsXlink="http://www.w3.org/1999/xlink"
-			onClick={onClick}
 			viewBox="0 0 512 512"
 			{...restProps}
 			width={(width && formatLength(width)) || '1em'}

src/Components/svg/SquareIcon.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactSvgIcon, { disabledColor } from './ReactSvgIcon/index';
 
-const DropDownIcon = ({ handleClick }) => (
-	<ReactSvgIcon handleClick={handleClick} className="SvgIconSquareIcon">
+const DropDownIcon = (props) => (
+	<ReactSvgIcon {...props} className="SvgIconSquareIcon">
 		<path
 			fill={disabledColor}
 			d="M432,32H80c-26.5,0-48,21.5-48,48v352c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V80C480,53.5,458.5,32,432,32z M432,432H80V80h352V432z"

src/Components/svg/SquareIconChecked.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactSvgIcon, { enabledColor } from './ReactSvgIcon/index';
 
-const DropDownIcon = ({ handleClick }) => (
-	<ReactSvgIcon handleClick={handleClick} className="SvgIconSquareIconChecked">
+const DropDownIcon = (props) => (
+	<ReactSvgIcon {...props} className="SvgIconSquareIconChecked">
 		<path
 			fill={enabledColor}
 			d="M432,32H80c-26.5,0-48,21.5-48,48v352c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V80C480,53.5,458.5,32,432,32z M396.1,190.3L223.5,361.5c-4.7,4.7-12.3,4.6-17-0.1l-90.8-91.5c-4.7-4.7-4.6-12.3,0.1-17l22.7-22.5c4.7-4.7,12.3-4.6,17,0.1l59.8,60.3l141.4-140.2c4.7-4.7,12.3-4.6,17,0.1l22.5,22.7C400.9,178,400.8,185.6,396.1,190.3L396.1,190.3z"

src/helpers/index.js

@@ -54,15 +54,15 @@ export const generateInput = ({ selected, type, iconSelectActive, iconSelectInac
 	if (type == 'select') {
 		if (selected) {
 			if (iconSelectActive === true || iconSelectActive === undefined || iconSelectActive === null) {
-				input = <CircleIconChecked handleClick={handleClick} />;
+				input = <CircleIconChecked onClick={handleClick} />;
 			} else if (iconSelectActive === false || iconSelectActive === 'off') {
 				input = '';
 			} else {
 				input = <i className={iconSelectActive} />;
 			}
 		} else {
 			if (iconSelectInactive === true || iconSelectActive === undefined || iconSelectActive === null) {
-				input = <CircleIcon handleClick={handleClick} />;
+				input = <CircleIcon onClick={handleClick} />;
 			} else if (iconSelectInactive === false || iconSelectInactive === 'off') {
 				input = '';
 			} else {
@@ -71,17 +71,22 @@ export const generateInput = ({ selected, type, iconSelectActive, iconSelectInac
 		}
 	} else {
 		// multiselect
+		const onClick = (event) => {
+			event.stopPropagation();
+			handleClick && handleClick(event);
+		};
+
 		if (selected) {
 			if (iconSelectActive === true || iconSelectActive === undefined || iconSelectActive === null) {
-				input = <SquareIconChecked handleClick={handleClick} />;
+				input = <SquareIconChecked onClick={onClick} />;
 			} else if (iconSelectActive === false || iconSelectActive === 'off') {
 				input = '';
 			} else {
 				input = <i className={iconSelectActive} />;
 			}
 		} else {
 			if (iconSelectInactive === true || iconSelectActive === undefined || iconSelectActive === null) {
-				input = <SquareIcon handleClick={handleClick} />;
+				input = <SquareIcon onClick={onClick} />;
 			} else if (iconSelectInactive === false || iconSelectInactive === 'off') {
 				input = '';
 			} else {