Keyboard/mouse mode and keyboard support bugfixes

ts/components/stickers/StickerManager.tsx

@@ -18,12 +18,6 @@ export type OwnProps = {
 
 export type Props = OwnProps;
 
-function focusOnRender(el: HTMLElement | null) {
-  if (el) {
-    el.focus();
-  }
-}
-
 export const StickerManager = React.memo(
   // tslint:disable-next-line max-func-body-length
   ({
@@ -36,6 +30,7 @@ export const StickerManager = React.memo(
     uninstallStickerPack,
     i18n,
   }: Props) => {
+    const focusRef = React.createRef<HTMLDivElement>();
     const [
       packToPreview,
       setPackToPreview,
@@ -48,6 +43,14 @@ export const StickerManager = React.memo(
       knownPacks.forEach(pack => {
         downloadStickerPack(pack.id, pack.key);
       });
+
+      // When this component is created, it's initially not part of the DOM, and then it's
+      //   added off-screen and animated in. This ensures that the focus takes.
+      setTimeout(() => {
+        if (focusRef.current) {
+          focusRef.current.focus();
+        }
+      });
     }, []);
 
     const clearPackToPreview = React.useCallback(
@@ -76,11 +79,7 @@ export const StickerManager = React.memo(
             uninstallStickerPack={uninstallStickerPack}
           />
         ) : null}
-        <div
-          className="module-sticker-manager"
-          tabIndex={-1}
-          ref={focusOnRender}
-        >
+        <div className="module-sticker-manager" tabIndex={-1} ref={focusRef}>
           {[
             {
               i18nKey: 'stickers--StickerManager--InstalledPacks',