2 files changed, 23 insertions, 25 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
index f1d109abc76..c66890153f3 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
@@ -29,7 +29,6 @@ import { formatMeasure } from '../../../helpers/measures';
 export default class Condition extends Component {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
     this.state = {
       changed: false,
       period: props.condition.period,
@@ -40,34 +39,27 @@ export default class Condition extends Component {
   }
 
   componentDidMount() {
-    const { condition } = this.props;
-
-    // TODO looks like `this.opetator` is always null or undefined
-    if (!condition.id && this.operator) {
+    if (!this.props.condition.id && this.operator) {
       this.operator.focus();
     }
   }
 
-  handleChange() {
-    this.setState({ changed: true });
-  }
-
   handleOperatorChange = ({ value }) => {
     this.setState({ changed: true, op: value });
   };
 
-  handlePeriodChange(checked) {
+  handlePeriodChange = checked => {
     const period = checked ? '1' : undefined;
     this.setState({ changed: true, period });
-  }
+  };
 
-  handleWarningChange(value) {
+  handleWarningChange = value => {
     this.setState({ changed: true, warning: value });
-  }
+  };
 
-  handleErrorChange(value) {
+  handleErrorChange = value => {
     this.setState({ changed: true, error: value });
-  }
+  };
 
   handleSaveClick = e => {
     const { qualityGate, condition, metric, onSaveCondition, onError, onResetError } = this.props;
@@ -177,7 +169,7 @@ export default class Condition extends Component {
       return this.renderPeriodValue();
     }
 
-    return <Checkbox checked={isLeakSelected} onCheck={this.handlePeriodChange.bind(this)} />;
+    return <Checkbox checked={isLeakSelected} onCheck={this.handlePeriodChange} />;
   }
 
   renderOperator() {
@@ -201,14 +193,14 @@ export default class Condition extends Component {
 
     return (
       <Select
-        ref={node => (this.operator = node)}
         className="input-medium"
-        name="operator"
-        value={this.state.op}
         clearable={false}
-        searchable={false}
-        options={operatorOptions}
+        innerRef={node => (this.operator = node)}
+        name="operator"
         onChange={this.handleOperatorChange}
+        options={operatorOptions}
+        searchable={false}
+        value={this.state.op}
       />
     );
   }
@@ -234,7 +226,7 @@ export default class Condition extends Component {
               name="warning"
               value={this.state.warning}
               metric={metric}
-              onChange={value => this.handleWarningChange(value)}
+              onChange={this.handleWarningChange}
             />
           ) : (
             formatMeasure(condition.warning, metric.type)
@@ -247,7 +239,7 @@ export default class Condition extends Component {
               name="error"
               value={this.state.error}
               metric={metric}
-              onChange={value => this.handleErrorChange(value)}
+              onChange={this.handleErrorChange}
             />
           ) : (
             formatMeasure(condition.error, metric.type)
diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 240b4164bf2..b4fd4864189 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -38,13 +38,19 @@ function renderInput() {
   );
 }
 
-export default function Select(props: ReactSelectProps) {
+interface WithInnerRef {
+  innerRef?: (element: ReactSelect) => void;
+}
+
+export default function Select({ innerRef, ...props }: WithInnerRef & ReactSelectProps) {
   // TODO try to define good defaults, if any
   // ReactSelect doesn't declare `clearRenderer` prop
   const ReactSelectAny = ReactSelect as any;
   // hide the "x" icon when select is empty
   const clearable = props.clearable ? Boolean(props.value) : false;
-  return <ReactSelectAny {...props} clearable={clearable} clearRenderer={renderInput} />;
+  return (
+    <ReactSelectAny {...props} clearable={clearable} clearRenderer={renderInput} ref={innerRef} />
+  );
 }
 
 export function Creatable(props: ReactCreatableSelectProps) {