From 3eb0e15860224cc595d5b7e78d2a5d60e808561c Mon Sep 17 00:00:00 2001
From: Sarah Third <sarahthird@khanacademy.org>
Date: Thu, 9 Nov 2023 16:00:25 -0800
Subject: [PATCH] Moving ref'd element above the animation so that it doesn't
 return null (#791)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Our keypadElement was only returning null to webapp after our new rendering improvements. This tiny PR should fix the issue so that we can use the keypadElement to scroll our inputs into view.


## Test plan:
- manual testing

Author: SonicScrewdriver

Reviewers: jeremywiebe, SonicScrewdriver

Required Reviewers:

Approved By: jeremywiebe

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

Pull Request URL: https://github.com/Khan/perseus/pull/791
---
 .changeset/chilled-jeans-sing.md              |  5 ++
 .../__snapshots__/mobile-keypad.test.tsx.snap | 12 +++--
 .../src/components/keypad/mobile-keypad.tsx   | 53 +++++++++----------
 3 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/chilled-jeans-sing.md

diff --git a/.changeset/chilled-jeans-sing.md b/.changeset/chilled-jeans-sing.md
new file mode 100644
index 0000000000..7ebd581b5b
--- /dev/null
+++ b/.changeset/chilled-jeans-sing.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Minor fix to ensure that the keypadElement is always provided to mobile keypad consumers
diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
index 36d343244b..25fcb99390 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
@@ -1,14 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`mobile keypad should not render the keypad when not active 1`] = `<div />`;
+exports[`mobile keypad should not render the keypad when not active 1`] = `
+<div>
+  <div
+    class="initial_4qg14c-o_O-keypadContainer_9ki71g"
+  />
+</div>
+`;
 
 exports[`mobile keypad should render keypad when active 1`] = `
 <div>
   <div
-    class="initial_4qg14c-o_O-keypadContainer_9ki71g inlineStyles_fr63ed"
+    class="initial_4qg14c-o_O-keypadContainer_9ki71g"
   >
     <div
-      class="default_xu2jcg"
+      class="default_xu2jcg inlineStyles_fr63ed"
     >
       <div
         class="default_xu2jcg-o_O-wrapper_144oaus"
diff --git a/packages/math-input/src/components/keypad/mobile-keypad.tsx b/packages/math-input/src/components/keypad/mobile-keypad.tsx
index 527703e742..441dea17ce 100644
--- a/packages/math-input/src/components/keypad/mobile-keypad.tsx
+++ b/packages/math-input/src/components/keypad/mobile-keypad.tsx
@@ -178,31 +178,28 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
         const convertDotToTimes = keypadConfig?.times;
 
         return (
-            <AphroditeCssTransitionGroup
-                transitionEnterTimeout={AnimationDurationInMS}
-                transitionLeaveTimeout={AnimationDurationInMS}
-                transitionStyle={{
-                    enter: {
-                        transform: "translate3d(0, 100%, 0)",
-                        transition: `${AnimationDurationInMS}ms ease-out`,
-                    },
-                    enterActive: {
-                        transform: "translate3d(0, 0, 0)",
-                    },
-                    leave: {
-                        transform: "translate3d(0, 0, 0)",
-                        transition: `${AnimationDurationInMS}ms ease-out`,
-                    },
-                    leaveActive: {
-                        transform: "translate3d(0, 100%, 0)",
-                    },
-                }}
-            >
-                {keypadActive ? (
-                    <View
-                        style={containerStyle}
-                        forwardRef={this._containerRef}
-                    >
+            <View style={containerStyle} forwardRef={this._containerRef}>
+                <AphroditeCssTransitionGroup
+                    transitionEnterTimeout={AnimationDurationInMS}
+                    transitionLeaveTimeout={AnimationDurationInMS}
+                    transitionStyle={{
+                        enter: {
+                            transform: "translate3d(0, 100%, 0)",
+                            transition: `${AnimationDurationInMS}ms ease-out`,
+                        },
+                        enterActive: {
+                            transform: "translate3d(0, 0, 0)",
+                        },
+                        leave: {
+                            transform: "translate3d(0, 0, 0)",
+                            transition: `${AnimationDurationInMS}ms ease-out`,
+                        },
+                        leaveActive: {
+                            transform: "translate3d(0, 100%, 0)",
+                        },
+                    }}
+                >
+                    {keypadActive ? (
                         <Keypad
                             onAnalyticsEvent={this.props.onAnalyticsEvent}
                             extraKeys={keypadConfig?.extraKeys}
@@ -221,9 +218,9 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                             }
                             showDismiss
                         />
-                    </View>
-                ) : null}
-            </AphroditeCssTransitionGroup>
+                    ) : null}
+                </AphroditeCssTransitionGroup>
+            </View>
         );
     }
 }