From bc475ef8e5210233b4cceca215de00fe4431acf3 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 30 Jul 2024 09:44:35 -0700
Subject: [PATCH 1/3] Reverting portaling behavior that's blocking users.

---
 .../keypad/keypad-mathquill.stories.tsx       |  1 -
 .../math-input/src/components/tabbar/item.tsx | 20 +++++++++++++++++--
 .../components/__tests__/math-input.test.tsx  |  1 +
 .../perseus/src/components/math-input.tsx     |  1 -
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
index c475e03afc..6bd72e0a66 100644
--- a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
+++ b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
@@ -68,7 +68,6 @@ export function V2KeypadWithMathquill() {
     return (
         <div style={{maxWidth: "400px", margin: "2em"}}>
             <Popover
-                portal={false}
                 content={
                     <PopoverContentCore
                         style={{
diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index 6be3992877..de95e5adb6 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -89,10 +89,26 @@ function TabbarItem(props: TabItemProps): React.ReactElement {
     const tabRef = useRef<{focus: () => void}>(null);
 
     useEffect(() => {
+        let timeout;
         if (role === "tab" && focus) {
-            // Move element into view when it is focused
-            tabRef?.current?.focus();
+            /**
+             * When tabs are within a WonderBlocks Popover component, the
+             * manner in which the component is rendered and moved causes
+             * focus to snap to the bottom of the page on first focus.
+             *
+             * This timeout moves around that by delaying the focus enough
+             * to wait for the WonderBlock Popover to move to the correct
+             * location and scroll the user to the correct location.
+             * */
+            timeout = setTimeout(() => {
+                if (tabRef?.current) {
+                    // Move element into view when it is focused
+                    tabRef?.current.focus();
+                }
+            }, 0);
         }
+
+        return () => clearTimeout(timeout);
     }, [role, focus, tabRef]);
 
     return (
diff --git a/packages/perseus/src/components/__tests__/math-input.test.tsx b/packages/perseus/src/components/__tests__/math-input.test.tsx
index a115674cc7..8d0e7b4625 100644
--- a/packages/perseus/src/components/__tests__/math-input.test.tsx
+++ b/packages/perseus/src/components/__tests__/math-input.test.tsx
@@ -172,6 +172,7 @@ describe("Perseus' MathInput", () => {
             screen.getByRole("button", {name: /open math keypad/}),
         );
         await userEvent.tab(); // to "123" tab
+        await userEvent.tab(); // to "1" button
         await userEvent.keyboard("{enter}");
         act(() => jest.runOnlyPendingTimers());
 
diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index 4e9e8f4ca6..f5a0f79b44 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -329,7 +329,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                     <Popover
                         opened={this.state.keypadOpen}
                         onClose={() => this.closeKeypad()}
-                        portal={false}
                         dismissEnabled
                         content={() => (
                             <PopoverContentCore

From 45e533b8ac4707218d6d1b0635600fb18f4b391e Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 30 Jul 2024 10:00:48 -0700
Subject: [PATCH 2/3] Adding changeset.

---
 .changeset/young-clocks-walk.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/young-clocks-walk.md

diff --git a/.changeset/young-clocks-walk.md b/.changeset/young-clocks-walk.md
new file mode 100644
index 0000000000..2d4c54490f
--- /dev/null
+++ b/.changeset/young-clocks-walk.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+---
+
+Reverting portal disabled functionality to ensure no clipping behavior.

From b8c887c98d67aa5a3a63ded4d22283417a551649 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 30 Jul 2024 10:12:33 -0700
Subject: [PATCH 3/3] Updating snapshots.

---
 .../keypad/__tests__/__snapshots__/keypad.test.tsx.snap   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
index 9d2bd1fa52..bcb11f03e6 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
@@ -19,13 +19,13 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
             tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
+              class="default_xu2jcg-o_O-base_1pupywz"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"
@@ -1075,13 +1075,13 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
             tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
+              class="default_xu2jcg-o_O-base_1pupywz"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"