Moving ref'd element above the animation so that it doesn't return nu…

…ll (#791)

## 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: #791

.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

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"

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>
         );
     }
 }