From 6f013e559ef3ce88741d5697732b9c711e793085 Mon Sep 17 00:00:00 2001
From: Dylan Kilgore <dkilgore@eightfold.ai>
Date: Wed, 31 Aug 2022 16:20:34 -0700
Subject: [PATCH] fix: select: removes portal property from tooltip and replace
 with position

---
 src/components/Select/Select.stories.tsx      |  2 +-
 src/components/Select/Select.tsx              |  2 +-
 .../__snapshots__/Select.stories.storyshot    | 80 ++++++++++++++++---
 3 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index f63c6dc88..70a7bd1c8 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -108,7 +108,7 @@ export default {
 } as ComponentMeta<typeof Select>;
 
 const Wrapper: FC<SelectProps> = ({ children }) => {
-    return <div>{children}</div>;
+    return <div style={{ marginTop: 80 }}>{children}</div>;
 };
 
 const DynamicSelect: FC<SelectProps> = (args) => {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index dc326b78e..1108aea65 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -293,8 +293,8 @@ export const Select: FC<SelectProps> = React.forwardRef(
                     <Tooltip
                         classNames={styles.selectTooltip}
                         content={value.text}
+                        placement={'top'}
                         theme={TooltipTheme.dark}
-                        portal
                     >
                         <Pill
                             ref={(ref) => (pillRefs.current[index] = ref)}
diff --git a/src/src/components/Select/__snapshots__/Select.stories.storyshot b/src/src/components/Select/__snapshots__/Select.stories.storyshot
index e7d91d859..530aecac7 100644
--- a/src/src/components/Select/__snapshots__/Select.stories.storyshot
+++ b/src/src/components/Select/__snapshots__/Select.stories.storyshot
@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Select Basic 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -80,7 +86,13 @@ exports[`Storyshots Select Basic 1`] = `
 `;
 
 exports[`Storyshots Select Disabled 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -159,7 +171,13 @@ exports[`Storyshots Select Disabled 1`] = `
 `;
 
 exports[`Storyshots Select Dynamic 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -238,7 +256,13 @@ exports[`Storyshots Select Dynamic 1`] = `
 `;
 
 exports[`Storyshots Select Dynamic Width 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -317,7 +341,13 @@ exports[`Storyshots Select Dynamic Width 1`] = `
 `;
 
 exports[`Storyshots Select Filterable 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -396,7 +426,13 @@ exports[`Storyshots Select Filterable 1`] = `
 `;
 
 exports[`Storyshots Select Multiple 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -475,7 +511,13 @@ exports[`Storyshots Select Multiple 1`] = `
 `;
 
 exports[`Storyshots Select Multiple With No Filter 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -554,7 +596,13 @@ exports[`Storyshots Select Multiple With No Filter 1`] = `
 `;
 
 exports[`Storyshots Select Options Disabled 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -633,7 +681,13 @@ exports[`Storyshots Select Options Disabled 1`] = `
 `;
 
 exports[`Storyshots Select With Clear 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"
@@ -712,7 +766,13 @@ exports[`Storyshots Select With Clear 1`] = `
 `;
 
 exports[`Storyshots Select With Default Value 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
   <div
     className="select-wrapper octuple-select-class"
     data-test-id="octuple-select-test-id"