public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/Switch: Makes Switch ID generation more stable (#25542)

Browse Source
This commit is contained in:
kay delaney
2020-06-11 12:47:49 +01:00
committed by GitHub
parent 79fea5df2a
commit 12d2f2c026
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Switch/Switch.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import React, { HTMLProps } from 'react'; import React, { HTMLProps, useRef } from 'react';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import uniqueId from 'lodash/uniqueId'; import uniqueId from 'lodash/uniqueId';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
@@ -79,7 +79,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
({ value, checked, disabled = false, onChange, ...inputProps }, ref) => { ({ value, checked, disabled = false, onChange, ...inputProps }, ref) => {
const theme = useTheme(); const theme = useTheme();
const styles = getSwitchStyles(theme); const styles = getSwitchStyles(theme);
const switchId = uniqueId('switch-'); const switchIdRef = useRef(uniqueId('switch-'));
return ( return (
<div className={cx(styles.switch)}> <div className={cx(styles.switch)}>
@@ -90,11 +90,11 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
onChange={event => { onChange={event => {
onChange?.(event); onChange?.(event);
}} }}
id={switchId} id={switchIdRef.current}
{...inputProps} {...inputProps}
ref={ref} ref={ref}
/> />
<label htmlFor={switchId} /> <label htmlFor={switchIdRef.current} />
</div> </div>
); );
} }