Reverting portal disable functionality, causing clipping behavior. (#…

…1461) ## Summary: Adding back portal functionality for Expression Widget to ensure it does not get clipped. This implementation was originally added in this PR: #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: #1461
Khan · Jul 30, 2024 · 2e8022a · 2e8022a
1 parent b9087f7
commit 2e8022a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 8 deletions.
diff --git a/.changeset/young-clocks-walk.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -329,7 +329,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                     <Popover
                         opened={this.state.keypadOpen}
                         onClose={() => this.closeKeypad()}
-                        portal={false}
                         dismissEnabled
                         content={() => (
                             <PopoverContentCore