@khanacademy/math-input 20.0.2 → 20.0.3

package/dist/index.js

@@ -44,7 +44,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "20.0.2";
+const libVersion = "20.0.3";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -2669,10 +2669,25 @@ function TabbarItem(props) {
   } = props;
   const tabRef = React.useRef(null);
   React.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 /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
     onClick: onClick,