FieldValuesWidget: Add auto expanding behavior

frontend/src/metabase/components/FieldValuesWidget.jsx

@@ -8,6 +8,8 @@ import TokenField from "metabase/components/TokenField";
 import RemappedValue from "metabase/containers/RemappedValue";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
 
+import AutoExpanding from "metabase/hoc/AutoExpanding";
+
 import { MetabaseApi } from "metabase/services";
 import { addRemappings, fetchFieldValues } from "metabase/redux/metadata";
 import { defer } from "metabase/lib/promise";
@@ -37,6 +39,7 @@ type Props = {
   maxResults: number,
   style?: { [key: string]: string | number },
   placeholder?: string,
+  maxWidth?: number,
 };
 
 type State = {
@@ -46,6 +49,7 @@ type State = {
   lastValue: string,
 };
 
+@AutoExpanding
 export class FieldValuesWidget extends Component {
   props: Props;
   state: State;
@@ -67,6 +71,7 @@ export class FieldValuesWidget extends Component {
     maxResults: MAX_SEARCH_RESULTS,
     alwaysShowOptions: true,
     style: {},
+    maxWidth: 500,
   };
 
   componentWillMount() {
@@ -226,7 +231,12 @@ export class FieldValuesWidget extends Component {
     }
 
     return (
-      <div>
+      <div
+        style={{
+          width: this.props.expand ? this.props.maxWidth : null,
+          maxWidth: this.props.maxWidth,
+        }}
+      >
         <TokenField
           value={value.filter(v => v != null)}
           onChange={onChange}

frontend/src/metabase/hoc/AutoExpanding.jsx

+import React from "react";
+
+import ExplicitSize from "metabase/components/ExplicitSize";
+
+// If the composed element increases from it's original width, sets `expand` to true
+//
+// Used for components which we initially want to be small, but if they expand
+// beyond their initial size we want to fix their size to be larger so it doesn't
+// jump around, etc
+export default ComposedComponent =>
+  @ExplicitSize
+  class AutoExpanding extends React.Component {
+    state = {
+      expand: false,
+    };
+    componentWillReceiveProps(nextProps) {
+      if (
+        nextProps.width != null &&
+        this.props.width != null &&
+        nextProps.width > this.props.width
+      ) {
+        this.setState({ expand: true });
+      }
+    }
+    render() {
+      return <ComposedComponent {...this.props} {...this.state} />;
+    }
+  };

frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget.jsx

@@ -115,6 +115,7 @@ export default class ParameterFieldWidget extends Component<*, Props, State> {
               borderWidth: 2,
               minWidth: 182,
             }}
+            maxWidth={400}
           />
           <div className="flex p1">
             <Button