Revert "Migrate ParameterFieldWidget to TippyPopover (#21545)" (#21693)

frontend/src/metabase/parameters/components/ParameterValueWidget.jsx

@@ -164,7 +164,6 @@ export default class ParameterValueWidget extends Component {
           isEnabled={isDashParamWithoutMapping}
         >
           <div
-            ref={this.trigger}
             className={cx(S.parameter, S.noPopover, className, {
               [S.selected]: hasValue,
               [S.isEditing]: isEditing,
@@ -173,7 +172,6 @@ export default class ParameterValueWidget extends Component {
             {showTypeIcon && <ParameterTypeIcon parameter={parameter} />}
             <Widget
               {...this.props}
-              target={this.getTargetRef()}
               onFocusChanged={this.onFocusChanged}
               onPopoverClose={this.onPopoverClose}
               disabled={isDashParamWithoutMapping}
@@ -229,7 +227,6 @@ export default class ParameterValueWidget extends Component {
           >
             <Widget
               {...this.props}
-              target={this.getTargetRef()}
               onFocusChanged={this.onFocusChanged}
               onPopoverClose={this.onPopoverClose}
               disabled={isDashParamWithoutMapping}
@@ -273,7 +270,6 @@ function Widget({
   parameters,
   dashboard,
   disabled,
-  target,
 }) {
   const DateWidget = DATE_WIDGETS[parameter.type];
   const fields = getFields(metadata, parameter);
@@ -295,7 +291,6 @@ function Widget({
   } else if (fields.length > 0 && parameter.hasOnlyFieldTargets) {
     return (
       <ParameterFieldWidget
-        target={target}
         parameter={parameter}
         parameters={parameters}
         dashboard={dashboard}

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

@@ -7,7 +7,7 @@ import _ from "underscore";
 
 import FieldValuesWidget from "metabase/components/FieldValuesWidget";
 import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue/ParameterFieldWidgetValue";
-import TippyPopover from "metabase/components/Popover/TippyPopover";
+import Popover from "metabase/components/Popover";
 import Button from "metabase/core/components/Button";
 
 import { normalizeValue } from "./normalizeValue";
@@ -30,7 +30,6 @@ const propTypes = {
   placeholder: PropTypes.string.isRequired,
   setValue: PropTypes.func.isRequired,
   value: PropTypes.string,
-  target: PropTypes.instanceOf(Element).isRequired,
 };
 
 const BORDER_WIDTH = 1;
@@ -119,78 +118,69 @@ export default class ParameterFieldWidget extends Component {
       );
     } else {
       return (
-        <TippyPopover
-          reference={this.props.target}
-          placement="bottom-start"
-          visible
-          onClose={() => focusChanged(false)}
-          content={
-            <div
-              className={cx("relative PopoverBody--marginBottom", {
-                p2: !isEqualsOp,
-              })}
-            >
-              {verboseName && !isEqualsOp && (
-                <div className="text-bold mb1">{verboseName}...</div>
-              )}
-
-              {_.times(numFields, index => {
-                const value = multi ? unsavedValue : [unsavedValue[index]];
-                const onValueChange = multi
-                  ? newValues => this.setState({ value: newValues })
-                  : ([value]) => {
-                      const newValues = [...unsavedValue];
-                      newValues[index] = value;
-                      this.setState({ value: newValues });
-                    };
-                return (
-                  <FieldValuesWidget
-                    key={index}
-                    className={cx("input", numFields - 1 !== index && "mb1")}
-                    value={value}
-                    parameter={parameter}
-                    parameters={parameters}
-                    dashboard={dashboard}
-                    onChange={onValueChange}
-                    placeholder={placeholder}
-                    fields={fields}
-                    autoFocus={index === 0}
-                    multi={multi}
-                    disableSearch={disableSearch}
-                    formatOptions={
-                      operator &&
-                      getFilterArgumentFormatOptions(operator, index)
-                    }
-                    color="brand"
-                    style={{
-                      borderWidth: BORDER_WIDTH,
-                      minWidth: widgetWidth
-                        ? widgetWidth + BORDER_WIDTH * 2
-                        : null,
-                    }}
-                    minWidth={300}
-                    maxWidth={400}
-                  />
-                );
-              })}
-              <div className={footerClassName}>
-                <Button
-                  primary
-                  className="ml-auto"
-                  disabled={
-                    savedValue.length === 0 && unsavedValue.length === 0
+        <Popover hasArrow={false} onClose={() => focusChanged(false)}>
+          <div
+            className={cx("relative PopoverBody--marginBottom", {
+              p2: !isEqualsOp,
+            })}
+          >
+            {verboseName && !isEqualsOp && (
+              <div className="text-bold mb1">{verboseName}...</div>
+            )}
+
+            {_.times(numFields, index => {
+              const value = multi ? unsavedValue : [unsavedValue[index]];
+              const onValueChange = multi
+                ? newValues => this.setState({ value: newValues })
+                : ([value]) => {
+                    const newValues = [...unsavedValue];
+                    newValues[index] = value;
+                    this.setState({ value: newValues });
+                  };
+              return (
+                <FieldValuesWidget
+                  key={index}
+                  className={cx("input", numFields - 1 !== index && "mb1")}
+                  value={value}
+                  parameter={parameter}
+                  parameters={parameters}
+                  dashboard={dashboard}
+                  onChange={onValueChange}
+                  placeholder={placeholder}
+                  fields={fields}
+                  autoFocus={index === 0}
+                  multi={multi}
+                  disableSearch={disableSearch}
+                  formatOptions={
+                    operator && getFilterArgumentFormatOptions(operator, index)
                   }
-                  onClick={() => {
-                    setValue(unsavedValue.length > 0 ? unsavedValue : null);
-                    focusChanged(false);
+                  color="brand"
+                  style={{
+                    borderWidth: BORDER_WIDTH,
+                    minWidth: widgetWidth
+                      ? widgetWidth + BORDER_WIDTH * 2
+                      : null,
                   }}
-                >
-                  {savedValue.length > 0 ? t`Update filter` : t`Add filter`}
-                </Button>
-              </div>
+                  minWidth={300}
+                  maxWidth={400}
+                />
+              );
+            })}
+            <div className={footerClassName}>
+              <Button
+                primary
+                className="ml-auto"
+                disabled={savedValue.length === 0 && unsavedValue.length === 0}
+                onClick={() => {
+                  setValue(unsavedValue.length > 0 ? unsavedValue : null);
+                  focusChanged(false);
+                }}
+              >
+                {savedValue.length > 0 ? t`Update filter` : t`Add filter`}
+              </Button>
             </div>
-          }
-        />
+          </div>
+        </Popover>
       );
     }
   }