From 6f7865b915ccd1fb30355342e3ec151909e79614 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 28 Nov 2019 15:50:42 +0300 Subject: [PATCH 1/3] Fixed `EuiSwitch` clicking on disabled label --- CHANGELOG.md | 1 + src/components/form/switch/_switch.scss | 2 +- src/components/form/switch/switch.tsx | 20 +++++++++++++------- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd69539d9fd..84d1389ec03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ **Bug fixes** +- Fixed `EuiSwitch` clicking on disabled label, positioning (regression) ([#2574](https://github.com/elastic/eui/pull/2574)) - 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.scss b/src/components/form/switch/_switch.scss index 800938ae35b..fc6e4de9058 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -1,6 +1,6 @@ .euiSwitch { position: relative; - display: inline-block; + display: flex; min-height: $euiSwitchHeight; .euiSwitch__label { diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx index bb0da46fa13..5798ee4c99d 100644 --- 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 = ({ const [switchId] = useState(id || makeId()); const [labelId] = useState(makeId()); - const onClick = ( - e: React.MouseEvent - ) => { - const event = (e as unknown) as EuiSwitchEvent; - event.target.checked = !checked; - onChange(event); - }; + const onClick = useCallback( + (e: React.MouseEvent) => { + if (disabled) { + return; + } + + const event = (e as unknown) as EuiSwitchEvent; + event.target.checked = !checked; + onChange(event); + }, + [checked, disabled, onChange] + ); const classes = classNames( 'euiSwitch', From acd69df682c13078382b4b85139affd00211eb41 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Date: Thu, 28 Nov 2019 17:16:41 +0300 Subject: [PATCH 2/3] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84d1389ec03..f015361c9d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ **Bug fixes** -- Fixed `EuiSwitch` clicking on disabled label, positioning (regression) ([#2574](https://github.com/elastic/eui/pull/2574)) +- Fixed `EuiSwitch` clicking on disabled label, positioning (regression) ([#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)) From b01394685f4f6e7ad159d1ad19b90d425c353bd7 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 3 Dec 2019 14:02:26 +0300 Subject: [PATCH 3/3] Revert positioning change --- CHANGELOG.md | 2 +- src/components/form/switch/_switch.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f015361c9d8..4585bbf7c62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ **Bug fixes** -- Fixed `EuiSwitch` clicking on disabled label, positioning (regression) ([#2575](https://github.com/elastic/eui/pull/2575)) +- 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.scss b/src/components/form/switch/_switch.scss index fc6e4de9058..800938ae35b 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -1,6 +1,6 @@ .euiSwitch { position: relative; - display: flex; + display: inline-block; min-height: $euiSwitchHeight; .euiSwitch__label {