diff --git a/CHANGELOG.md b/CHANGELOG.md index cd69539d9fd..4585bbf7c62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,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 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',