From d2893c2d1ad1fb69105396d15b8385f61b78d697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 19 Feb 2019 11:17:40 +0100
Subject: [PATCH] Fixes #15506

---
 .../src/components/Switch/Switch.tsx          | 20 ++++++++++---------
 public/sass/components/_switch.scss           |  4 ++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index feee58386b8..f79de95fd2d 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -17,7 +17,7 @@ export interface State {
 
 export class Switch extends PureComponent<Props, State> {
   state = {
-    id: _.uniqueId(),
+    id: _.uniqueId('check-'),
   };
 
   internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -29,18 +29,20 @@ export class Switch extends PureComponent<Props, State> {
   render() {
     const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
 
-    const labelId = `check-${this.state.id}`;
+    const labelId = this.state.id;
     const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}>
-        {label && <div className={labelClassName}>{label}</div>}
-        <div className={switchClassName}>
-          <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
-          <span className="gf-form-switch__slider" />
-        </div>
-      </label>
+      <div className="gf-form-switch-container-react">
+        <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
+          {label && <div className={labelClassName}>{label}</div>}
+          <div className={switchClassName}>
+            <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+            <span className="gf-form-switch__slider" />
+          </div>
+        </label>
+      </div>
     );
   }
 }
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index 92756f81a76..f7980215659 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -13,6 +13,10 @@ gf-form-switch[disabled] {
   }
 }
 
+.gf-form-switch-container-react {
+  display: flex;
+}
+
 .gf-form-switch-container {
   display: flex;
   cursor: pointer;