From 2e8022adb11a000fb77528b1268ad5725dec817b Mon Sep 17 00:00:00 2001
From: Cat Johnson <123020281+catandthemachines@users.noreply.github.com>
Date: Tue, 30 Jul 2024 10:36:25 -0700
Subject: [PATCH] Reverting portal disable functionality, causing clipping
 behavior. (#1461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Adding back portal functionality for Expression Widget to ensure it does not get clipped.

This implementation was originally added in this PR: https://github.com/Khan/perseus/pull/1424

Issue: LEMS-2224

## Test plan:
Go to https://khan.github.io/perseus/?path=/story/perseus-widgets-expression--desktop-kitchen-sink
Confirm that you have to tab through all the tab pannels to get the the main keypad, instead of going directly to the keypad.

Author: catandthemachines

Reviewers: handeyeco, catandthemachines

Required Reviewers:

Approved By: handeyeco

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1461
---
 .changeset/young-clocks-walk.md               |  6 ++++++
 .../__snapshots__/keypad.test.tsx.snap        |  8 ++++----
 .../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 -
 6 files changed, 29 insertions(+), 8 deletions(-)
 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.
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"
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