Fixed EuiSwitch clicking on disabled label (#2575)

* Fixed `EuiSwitch` clicking on disabled label * Update CHANGELOG.md
elastic · Dec 3, 2019 · 4d646fa · 4d646fa
1 parent cb04b04
commit 4d646fa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 **Bug fixes**
 
+- Fixed `EuiSwitch` clicking on disabled label ([#2575](https://github.com/elastic/eui/pull/2575))
 - Fixed `EuiDataGrid` schema detection on already defined column schemas ([#2550](https://github.com/elastic/eui/pull/2550))
 - Added `euiTextBreakWord()` to `EuiToast` header ([#2549](https://github.com/elastic/eui/pull/2549))
 - Fixed `.eui-textBreakAll` on Firefox ([#2549](https://github.com/elastic/eui/pull/2549))

diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
@@ -3,6 +3,7 @@ import React, {
   FunctionComponent,
   ReactNode,
   useState,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
 
@@ -49,13 +50,18 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   const [switchId] = useState(id || makeId());
   const [labelId] = useState(makeId());
 
-  const onClick = (
-    e: React.MouseEvent<HTMLButtonElement | HTMLParagraphElement>
-  ) => {
-    const event = (e as unknown) as EuiSwitchEvent;
-    event.target.checked = !checked;
-    onChange(event);
-  };
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement | HTMLParagraphElement>) => {
+      if (disabled) {
+        return;
+      }
+
+      const event = (e as unknown) as EuiSwitchEvent;
+      event.target.checked = !checked;
+      onChange(event);
+    },
+    [checked, disabled, onChange]
+  );
 
   const classes = classNames(
     'euiSwitch',