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"
>
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 {
this.closeKeypad()}
- portal={false}
dismissEnabled
content={() => (