bugfix: update expandable after Preact render

birchill · May 8, 2024 · e4873bc · e4873bc
1 parent d466151
commit e4873bc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/src/content/popup/KanjiReferencesTable.tsx b/src/content/popup/KanjiReferencesTable.tsx
@@ -1,5 +1,5 @@
 import { KanjiResult } from '@birchill/jpdict-idb';
-import { useMemo } from 'preact/hooks';
+import { useLayoutEffect, useMemo } from 'preact/hooks';
 
 import { I18nProvider, useLocale } from '../../common/i18n';
 import {
@@ -25,12 +25,23 @@ export function WrappedKanjiReferencesTable(props: Props) {
 type Props = {
   entry: KanjiResult;
   kanjiReferences: Array<ReferenceAbbreviation>;
+  updateExpandable?: () => void;
 };
 
 /**
  * @public
  */
-export function KanjiReferencesTable({ entry, kanjiReferences }: Props) {
+export function KanjiReferencesTable({
+  entry,
+  kanjiReferences,
+  updateExpandable,
+}: Props) {
+  useLayoutEffect(() => {
+    // Expandable needs to be updated after the
+    // render, so this callback is passed down.
+    updateExpandable?.();
+  });
+
   const { t, langTag } = useLocale();
 
   const referenceTableInfo = useMemo(() => {

diff --git a/src/content/popup/kanji.ts b/src/content/popup/kanji.ts
@@ -14,9 +14,11 @@ import { popupHasSelectedText } from './selection';
 export function renderKanjiEntries({
   entries,
   options,
+  updateExpandable,
 }: {
   entries: ReadonlyArray<KanjiResult>;
   options: PopupOptions;
+  updateExpandable: () => void;
 }): HTMLElement {
   const container = html('div', { class: 'kanjilist entry-data' });
 
@@ -36,6 +38,7 @@ export function renderKanjiEntries({
               ? 'selected'
               : 'flash'
             : 'unselected',
+        updateExpandable,
       })
     );
   }
@@ -48,11 +51,13 @@ function renderKanjiEntry({
   index,
   options,
   selectState,
+  updateExpandable,
 }: {
   entry: KanjiResult;
   index: number;
   options: PopupOptions;
   selectState: 'unselected' | 'selected' | 'flash';
+  updateExpandable: () => void;
 }): HTMLElement {
   // Main table
   const table = html('div', { class: 'kanji-table' });
@@ -110,7 +115,7 @@ function renderKanjiEntry({
 
   // Reference row
   if (options.kanjiReferences && options.kanjiReferences.length) {
-    table.append(renderReferences(entry, options));
+    table.append(renderReferences(entry, options, updateExpandable));
   }
 
   return table;
@@ -341,14 +346,16 @@ function renderMiscRow(entry: KanjiResult): HTMLElement {
 
 function renderReferences(
   entry: KanjiResult,
-  options: PopupOptions
+  { kanjiReferences }: PopupOptions,
+  updateExpandable: () => void
 ): HTMLElement {
   // Temporary React root container
   const containerElement = html('div');
   render(
     h(WrappedKanjiReferencesTable, {
       entry,
-      kanjiReferences: options.kanjiReferences,
+      updateExpandable,
+      kanjiReferences,
     }),
     containerElement
   );

diff --git a/src/content/popup/popup.ts b/src/content/popup/popup.ts
@@ -146,8 +146,22 @@ export function renderPopup(
       contentContainer.append(
         html(
           'div',
-          { class: 'expandable' },
-          renderKanjiEntries({ entries: resultToShow.data, options })
+          { id: 'kanji-expandable', class: 'expandable' },
+          renderKanjiEntries({
+            entries: resultToShow.data,
+            options,
+            updateExpandable: () => {
+              const expandable = contentContainer.querySelector<HTMLElement>(
+                '#kanji-expandable.expandable'
+              );
+              if (expandable) {
+                updateExpandable(expandable, {
+                  ...options,
+                  showKeyboardShortcut: options.displayMode === 'static',
+                });
+              }
+            },
+          })
         )
       );
       break;
@@ -293,7 +307,7 @@ export function renderPopup(
 
   // Collapse expandable containers
   for (const expandable of contentContainer.querySelectorAll<HTMLElement>(
-    '.expandable'
+    '.expandable:not(#kanji-expandable)'
   )) {
     updateExpandable(expandable, {
       ...options,