From 5c3a0a624a7c0a52251f4bf39da21f369ae03999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 29 Mar 2019 14:25:11 +0100
Subject: [PATCH] Fix: Template query editor this bind exception fix (#16299)

Also fixes the default 100% width of inputs.
Fixes #16298
---
 .../grafana-ui/src/components/Input/Input.tsx    |  2 +-
 .../Input/__snapshots__/Input.test.tsx.snap      |  8 +++++++-
 .../__snapshots__/ThresholdsEditor.test.tsx.snap |  8 +++++++-
 .../templating/DefaultVariableQueryEditor.tsx    | 16 ++++++++--------
 .../__snapshots__/QueryEditor.test.tsx.snap      | 16 ++++++++++++++--
 5 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index b9b4e186ef2..b75a8c17760 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -72,7 +72,7 @@ export class Input extends PureComponent<Props> {
     const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
 
     return (
-      <div>
+      <div style={{ flexGrow: 1 }}>
         <input {...inputElementProps} className={inputClassName} />
         {error && !hideErrorMessage && <span>{error}</span>}
       </div>
diff --git a/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
index a79fc828de6..453e9cb59cf 100644
--- a/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/grafana-ui/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Input renders correctly 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "flexGrow": 1,
+    }
+  }
+>
   <input
     className="gf-form-input"
   />
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
index 91b2577dec2..bcdf81ed134 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
@@ -467,7 +467,13 @@ exports[`Render should render with base threshold 1`] = `
                     type="text"
                     value="Base"
                   >
-                    <div>
+                    <div
+                      style={
+                        Object {
+                          "flexGrow": 1,
+                        }
+                      }
+                    >
                       <input
                         className="gf-form-input"
                         readOnly={true}
diff --git a/public/app/features/templating/DefaultVariableQueryEditor.tsx b/public/app/features/templating/DefaultVariableQueryEditor.tsx
index f1326799115..7e69b3b8a00 100644
--- a/public/app/features/templating/DefaultVariableQueryEditor.tsx
+++ b/public/app/features/templating/DefaultVariableQueryEditor.tsx
@@ -8,13 +8,13 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
     this.state = { value: props.query };
   }
 
-  handleChange(event) {
-    this.setState({ value: event.target.value });
-  }
+  onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    this.setState({ value: event.currentTarget.value });
+  };
 
-  handleBlur(event) {
-    this.props.onChange(event.target.value, event.target.value);
-  }
+  onBlur = (event: React.FormEvent<HTMLInputElement>) => {
+    this.props.onChange(event.currentTarget.value, event.currentTarget.value);
+  };
 
   render() {
     return (
@@ -24,8 +24,8 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
           type="text"
           className="gf-form-input"
           value={this.state.value}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
+          onChange={this.onChange}
+          onBlur={this.onBlur}
           placeholder="metric name or tags query"
           required
         />
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
index 9d573dc6365..942f45f4116 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap
@@ -398,7 +398,13 @@ Array [
       >
         Alias By
       </label>
-      <div>
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+          }
+        }
+      >
         <input
           className="gf-form-input gf-form-input width-24"
           onChange={[Function]}
@@ -426,7 +432,13 @@ Array [
       >
         Project
       </span>
-      <div>
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+          }
+        }
+      >
         <input
           className="gf-form-input gf-form-input width-15"
           disabled={true}