fix: floating behavior of MultiComboBox options (#15373)

Author: lmossman

airbyte-webapp/src/components/ui/ComboBox/ComboBox.tsx

@@ -1,6 +1,8 @@
+import { autoUpdate, useFloating } from "@floating-ui/react-dom";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import classNames from "classnames";
 import React, { ReactNode, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 import { ControllerRenderProps, FieldValues } from "react-hook-form";
 import { useIntl } from "react-intl";
 
@@ -301,20 +303,40 @@ export const MultiComboBox = ({
   error,
   fieldInputProps,
   disabled,
-}: MultiComboBoxProps) => (
-  <Combobox value={value} onChange={onChange} multiple immediate>
-    <ComboboxInput as={React.Fragment}>
-      <TagInput
-        name={name}
-        fieldValue={value ?? []}
-        onChange={onChange}
-        onBlur={fieldInputProps?.onBlur}
-        error={error}
-        disabled={disabled}
-      />
-    </ComboboxInput>
-    <ComboboxOptions as="ul" className={styles.optionsMenu} modal={false}>
-      <Options optionSections={normalizeOptionsAsSections(options)} />
-    </ComboboxOptions>
-  </Combobox>
-);
+}: MultiComboBoxProps) => {
+  const { x, y, reference, floating, strategy } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: "bottom-start",
+  });
+
+  return (
+    <Combobox ref={reference} as="div" value={value} onChange={onChange} multiple immediate>
+      <ComboboxInput as={React.Fragment}>
+        <TagInput
+          name={name}
+          fieldValue={value ?? []}
+          onChange={onChange}
+          onBlur={fieldInputProps?.onBlur}
+          error={error}
+          disabled={disabled}
+        />
+      </ComboboxInput>
+      {createPortal(
+        <ComboboxOptions
+          ref={floating}
+          as="ul"
+          className={styles.optionsMenu}
+          modal={false}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          }}
+        >
+          <Options optionSections={normalizeOptionsAsSections(options)} />
+        </ComboboxOptions>,
+        document.body
+      )}
+    </Combobox>
+  );
+};