diff --git a/client/app/components/QueryBasedParameterInput.jsx b/client/app/components/QueryBasedParameterInput.jsx
index e2e731cd03..7273a34619 100644
--- a/client/app/components/QueryBasedParameterInput.jsx
+++ b/client/app/components/QueryBasedParameterInput.jsx
@@ -1,4 +1,4 @@
-import { find, isFunction } from 'lodash';
+import { find, isFunction, toString } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
@@ -35,10 +35,9 @@ export class QueryBasedParameterInput extends React.Component {
     this._loadOptions(this.props.queryId);
   }
 
-  // eslint-disable-next-line no-unused-vars
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.queryId !== this.props.queryId) {
-      this._loadOptions(nextProps.queryId, nextProps.value);
+  componentDidUpdate(prevProps) {
+    if (this.props.queryId !== prevProps.queryId) {
+      this._loadOptions(this.props.queryId);
     }
   }
 
@@ -68,7 +67,7 @@ export class QueryBasedParameterInput extends React.Component {
           className={className}
           disabled={loading || (options.length === 0)}
           loading={loading}
-          defaultValue={'' + value}
+          value={toString(value)}
           onChange={onSelect}
           dropdownMatchSelectWidth={false}
           dropdownClassName="ant-dropdown-in-bootstrap-modal"