Use TippyPopover in TokenField's DefaultTokenFieldLayout (#21098)

* Use TippyPopover in TokenField's DefaultTokenFieldLayout

* Make unit test async

frontend/src/metabase/components/TokenField.jsx

@@ -6,9 +6,8 @@ import { findDOMNode } from "react-dom";
 import _ from "underscore";
 import cx from "classnames";
 
-import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
 import Icon from "metabase/components/Icon";
-import Popover from "metabase/components/Popover";
+import TippyPopover from "metabase/components/Popover/TippyPopover";
 import { TokenFieldAddon, TokenFieldItem } from "./TokenField.styled";
 
 import {
@@ -616,22 +615,15 @@ const DefaultTokenFieldLayout = ({
   isFocused,
   onClose,
 }) => (
-  <OnClickOutsideWrapper handleDismissal={onClose}>
-    <div>
-      {valuesList}
-      <Popover
-        isOpen={isFocused && !!optionsList}
-        hasArrow={false}
-        tetherOptions={{
-          attachment: "top left",
-          targetAttachment: "bottom left",
-          targetOffset: "10 0",
-        }}
-      >
-        {optionsList}
-      </Popover>
-    </div>
-  </OnClickOutsideWrapper>
+  <div>
+    <TippyPopover
+      visible={isFocused && !!optionsList}
+      content={<div>{optionsList}</div>}
+      placement="bottom-start"
+    >
+      <div>{valuesList}</div>
+    </TippyPopover>
+  </div>
 );
 
 DefaultTokenFieldLayout.propTypes = {

frontend/test/metabase/pulse/pulse.unit.spec.js

@@ -16,7 +16,7 @@ const TEST_USERS = [
 
 describe("recipient picker", () => {
   describe("focus", () => {
-    it("should be focused if there are no recipients", () => {
+    it("should be focused if there are no recipients", async () => {
       render(
         <RecipientPicker
           recipients={[]}
@@ -26,8 +26,8 @@ describe("recipient picker", () => {
         />,
       );
       // Popover with all names should be open on focus
-      screen.getByText("Barb");
-      screen.getByText("Dustin");
+      await screen.findByText("Barb");
+      await screen.findByText("Dustin");
     });
     it("should not be focused if there are existing recipients", () => {
       render(