Clean up semantic-domain-clicking behavior

platform.bible-extension/src/components/back-to-list-button.tsx

@@ -1,16 +1,13 @@
 // Modified from paranext-core/extensions/src/components/dictionary/back-to-list-button.component.tsx
 
-import type { IEntry } from 'fw-lite-extension';
 import { ArrowLeft } from 'lucide-react';
-import { ListboxOption, Button, DrawerClose } from 'platform-bible-react';
+import { Button, DrawerClose } from 'platform-bible-react';
 import { LanguageStrings } from 'platform-bible-utils';
 
 /** Props for the BackToListButton component */
 type BackToListButtonProps = {
   /** Callback function to handle back button click, returning to the list view */
-  handleBackToListButton?: (option: ListboxOption) => void;
-  /** Dictionary entry to display in the button */
-  dictionaryEntry: IEntry;
+  handleBackToListButton?: () => void;
   /** Whether the display is in a drawer or just next to the list */
   isDrawer: boolean;
   /** Localized strings for the button */
@@ -27,18 +24,13 @@ type BackToListButtonProps = {
  */
 export default function BackToListButton({
   handleBackToListButton,
-  dictionaryEntry,
   isDrawer,
   localizedStrings,
 }: BackToListButtonProps) {
   if (!handleBackToListButton) return undefined;
 
   const button = (
-    <Button
-      onClick={() => handleBackToListButton({ id: dictionaryEntry.id })}
-      className="tw-flex tw-items-center"
-      variant="link"
-    >
+    <Button className="tw-flex tw-items-center" onClick={handleBackToListButton} variant="link">
       <ArrowLeft className="tw-mr-1 tw-h-4 tw-w-4" />
       {localizedStrings['%fwLiteExtension_dictionary_backToList%']}
     </Button>

platform.bible-extension/src/components/dictionary-entry-display.tsx

@@ -3,13 +3,7 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import type { DictionaryLanguages, IEntry, ISemanticDomain } from 'fw-lite-extension';
 import { ChevronUpIcon } from 'lucide-react';
-import {
-  Button,
-  DrawerDescription,
-  DrawerTitle,
-  Separator,
-  ListboxOption,
-} from 'platform-bible-react';
+import { Button, DrawerDescription, DrawerTitle, Separator } from 'platform-bible-react';
 import BackToListButton from './back-to-list-button';
 import DomainsDisplay from './domains-display';
 import { LOCALIZED_STRING_KEYS } from '../types/localized-string-keys';
@@ -28,7 +22,7 @@ export type DictionaryEntryDisplayProps = DictionaryLanguages & {
   /** Whether the display is in a drawer or just next to the list */
   isDrawer: boolean;
   /** Callback function to handle back button click, returning to the list view */
-  handleBackToListButton?: (option: ListboxOption) => void;
+  handleBackToListButton?: () => void;
   /** Callback function to handle scroll to top */
   onClickScrollToTop: () => void;
   /** Callback function to handle click on a semantic domain */
@@ -55,10 +49,19 @@ export default function DictionaryEntryDisplay({
   const TitleComponent = isDrawer ? DrawerTitle : 'span';
   const DescriptionComponent = isDrawer ? DrawerDescription : 'span';
 
+  /** If domain is clicked, call the provided callback then close the drawer. */
+  const onClickDomain = onClickSemanticDomain
+    ? (domain: ISemanticDomain) => {
+        onClickSemanticDomain(domain);
+        if (isDrawer) {
+          handleBackToListButton?.();
+        }
+      }
+    : undefined;
+
   return (
     <>
       <BackToListButton
-        dictionaryEntry={dictionaryEntry}
         isDrawer={isDrawer}
         localizedStrings={localizedStrings}
         handleBackToListButton={handleBackToListButton}
@@ -109,7 +112,7 @@ export default function DictionaryEntryDisplay({
               <DomainsDisplay
                 analysisLanguage={analysisLanguage}
                 domains={sense.semanticDomains}
-                onClickDomain={onClickSemanticDomain}
+                onClickDomain={onClickDomain}
               />
             </div>
           ))}

platform.bible-extension/src/components/dictionary-list.tsx

@@ -53,6 +53,10 @@ export default function DictionaryList({
     return dictionaryData.find((entry) => entry.id === selectedEntryId);
   }, [dictionaryData, selectedEntryId]);
 
+  const clearSelectedEntry = () => {
+    setSelectedEntryId(undefined);
+  };
+
   const handleOptionSelect = (option: ListboxOption) => {
     setSelectedEntryId((prevId) => (prevId === option.id ? undefined : option.id));
   };
@@ -123,7 +127,7 @@ export default function DictionaryList({
               isDrawer={false}
               analysisLanguage={analysisLanguage}
               dictionaryEntry={selectedEntry}
-              handleBackToListButton={handleOptionSelect}
+              handleBackToListButton={clearSelectedEntry}
               onClickScrollToTop={scrollToTop}
               onClickSemanticDomain={onClickSemanticDomain}
               vernacularLanguage={vernacularLanguage}
@@ -144,7 +148,7 @@ export default function DictionaryList({
                   isDrawer
                   analysisLanguage={analysisLanguage}
                   dictionaryEntry={selectedEntry}
-                  handleBackToListButton={() => setSelectedEntryId(undefined)}
+                  handleBackToListButton={clearSelectedEntry}
                   onClickScrollToTop={scrollToTop}
                   onClickSemanticDomain={onClickSemanticDomain}
                   vernacularLanguage={vernacularLanguage}

platform.bible-extension/src/components/domains-display.tsx

@@ -38,7 +38,12 @@ export default function DomainsDisplay({
           className="tw-rounded tw-bg-accent tw-px-2 tw-py-0.5 tw-text-xs tw-accent-foreground tw-flex tw-items-center tw-gap-1"
           disabled={!onClickDomain}
           key={domain.code}
-          onClick={() => onClickDomain?.(domain)}
+          onClick={(e) => {
+            if (onClickDomain) {
+              e.stopPropagation();
+              onClickDomain(domain);
+            }
+          }}
           type="button"
         >
           <Network className="tw-inline tw-mr-1 tw-h-3 tw-w-3" />