Fix: Template query editor this bind exception fix (#16299)

Also fixes the default 100% width of inputs.
Fixes #16298

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>

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"
   />

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}

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
         />

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}