feat(zbugs): Auto focus EmojiPicker

This required some fun coding... MutationObserver to the
rescue.

I also filed an issue to support this better:

nolanlawson/emoji-picker-element#470

apps/zbugs/src/components/emoji-panel.tsx

@@ -148,20 +148,17 @@ function normalizeEmoji(emoji: string): string {
 }
 
 function groupAndSortEmojis(emojis: Emoji[]): Record<string, Emoji[]> {
+  // Sort the emojis by creation time. Not sure how to sort this with ZQL.
+  const sortedEmojis = [...emojis].sort((a, b) => a.created - b.created);
   const rv: Record<string, Emoji[]> = {};
-  for (const emoji of emojis) {
+  for (const emoji of sortedEmojis) {
     const normalizedEmoji = normalizeEmoji(emoji.value);
     if (!rv[normalizedEmoji]) {
       rv[normalizedEmoji] = [];
     }
     rv[normalizedEmoji].push(emoji);
   }
 
-  // Sort the emojis by creation time. Not sure how to sort this with ZQL.
-  for (const key in rv) {
-    rv[key] = rv[key].sort((a, b) => a.created - b.created);
-  }
-
   return rv;
 }
 

apps/zbugs/src/components/emoji-picker.tsx

@@ -71,6 +71,31 @@ export function EmojiPicker({onEmojiChange}: Props) {
       el.addEventListener('emoji-click', onEmojiClick);
       el.addEventListener('skin-tone-change', onSkinToneChange);
       lastPicker.current = el;
+
+      // The emoji-picker-element does not allow auto focusing the search input
+      // when it's first rendered. We can work around this by observing the
+      // shadow DOM and focusing the search input when it's added to the DOM.
+      if (el.shadowRoot) {
+        const m = new MutationObserver(records => {
+          for (const record of records) {
+            for (const node of record.addedNodes) {
+              if (node.nodeType === Node.ELEMENT_NODE) {
+                const search = (node as Element).querySelector('#search');
+                if (search) {
+                  (search as HTMLElement).focus();
+                  m.disconnect();
+                }
+                return;
+              }
+            }
+          }
+        });
+
+        m.observe(el.shadowRoot, {
+          subtree: true,
+          childList: true,
+        });
+      }
     }
   };