From 336e68e401e006ea2350c934b21a9567551c474c Mon Sep 17 00:00:00 2001
From: Monkey Do <salicon.petiller@gmail.com>
Date: Mon, 29 Jul 2024 14:17:24 +0200
Subject: [PATCH] Autofocus on search input in modals

In MBIDMapping modal when clicking the button to copy text, otherwise it looks like there are no results as the text input needs to have focus to show the search results.

Apply same mechanism for "add listens" modal where applicable (mostly reset buttons)
---
 .../src/common/listens/MBIDMappingModal.tsx   |  5 +++
 .../src/user/components/AddSingleListen.tsx   |  6 +++-
 frontend/js/src/utils/SearchAlbumOrMBID.tsx   |  3 ++
 frontend/js/src/utils/SearchTrackOrMBID.tsx   | 36 +++++++++++++++----
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/frontend/js/src/common/listens/MBIDMappingModal.tsx b/frontend/js/src/common/listens/MBIDMappingModal.tsx
index 4346ee13c8..809e741f43 100644
--- a/frontend/js/src/common/listens/MBIDMappingModal.tsx
+++ b/frontend/js/src/common/listens/MBIDMappingModal.tsx
@@ -48,6 +48,8 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
     TrackMetadata
   >();
 
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
   const closeModal = React.useCallback(() => {
     modal.hide();
     document?.body?.classList?.remove("modal-open");
@@ -141,6 +143,8 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
     setDefaultValue(
       `${getTrackName(listenToMap)} - ${getArtistName(listenToMap)}`
     );
+    // Autofocus on the search input in order to automatically show list of results
+    searchInputRef?.current?.focus();
   }, [listenToMap]);
 
   const listenFromSelectedRecording = getListenFromSelectedRecording(
@@ -270,6 +274,7 @@ export default NiceModal.create(({ listenToMap }: MBIDMappingModalProps) => {
               ) : (
                 <div className="card listen-card">
                   <SearchTrackOrMBID
+                    ref={searchInputRef}
                     expectedPayload="trackmetadata"
                     key={`${defaultValue}-${copyTextClickCounter}`}
                     onSelectRecording={(trackMetadata) => {
diff --git a/frontend/js/src/user/components/AddSingleListen.tsx b/frontend/js/src/user/components/AddSingleListen.tsx
index 1fd0ce394a..dfefc4cf45 100644
--- a/frontend/js/src/user/components/AddSingleListen.tsx
+++ b/frontend/js/src/user/components/AddSingleListen.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   faChevronDown,
   faTimesCircle,
@@ -26,6 +26,8 @@ export default function AddSingleListen({
       | undefined;
   }>({});
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
   const removeRecording = (recordingMBID: string) => {
     setSelectedRecordings((prevRecordings) =>
       prevRecordings.filter((rec) => rec.id !== recordingMBID)
@@ -72,6 +74,7 @@ export default function AddSingleListen({
   return (
     <div>
       <SearchTrackOrMBID
+        ref={searchInputRef}
         expectedPayload="recording"
         onSelectRecording={selectRecording}
       />
@@ -101,6 +104,7 @@ export default function AddSingleListen({
                       iconSize="lg"
                       action={() => {
                         removeRecording(recording.id);
+                        searchInputRef?.current?.focus();
                       }}
                     />
                   }
diff --git a/frontend/js/src/utils/SearchAlbumOrMBID.tsx b/frontend/js/src/utils/SearchAlbumOrMBID.tsx
index 717708b3de..a86684f025 100644
--- a/frontend/js/src/utils/SearchAlbumOrMBID.tsx
+++ b/frontend/js/src/utils/SearchAlbumOrMBID.tsx
@@ -31,6 +31,7 @@ export default function SearchAlbumOrMBID({
   const { APIService } = useContext(GlobalAppContext);
   const { lookupMBReleaseGroup, searchMBRelease } = APIService;
   const dropdownRef = DropdownRef();
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(defaultValue ?? "");
   const [searchResults, setSearchResults] = useState<
     Array<MusicBrainzRelease & Partial<WithMedia> & WithArtistCredits>
@@ -122,6 +123,7 @@ export default function SearchAlbumOrMBID({
     setInputValue("");
     setSearchResults([]);
     onSelectAlbum();
+    searchInputRef?.current?.focus();
   };
 
   useEffect(() => {
@@ -143,6 +145,7 @@ export default function SearchAlbumOrMBID({
     <div>
       <div className="input-group dropdown-search" ref={dropdownRef}>
         <input
+          ref={searchInputRef}
           type="search"
           value={inputValue}
           className="form-control"
diff --git a/frontend/js/src/utils/SearchTrackOrMBID.tsx b/frontend/js/src/utils/SearchTrackOrMBID.tsx
index b030f48ae4..15e8d7d327 100644
--- a/frontend/js/src/utils/SearchTrackOrMBID.tsx
+++ b/frontend/js/src/utils/SearchTrackOrMBID.tsx
@@ -2,9 +2,11 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { throttle } from "lodash";
 import React, {
+  forwardRef,
   useCallback,
   useContext,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -37,11 +39,10 @@ type SearchTrackOrMBIDProps = {
   expectedPayload: PayloadType;
 } & ConditionalReturnValue;
 
-export default function SearchTrackOrMBID({
-  onSelectRecording,
-  expectedPayload,
-  defaultValue,
-}: SearchTrackOrMBIDProps) {
+const SearchTrackOrMBID = forwardRef(function SearchTrackOrMBID(
+  { onSelectRecording, expectedPayload, defaultValue }: SearchTrackOrMBIDProps,
+  inputRefForParent
+) {
   const { APIService } = useContext(GlobalAppContext);
   const { lookupMBRecording } = APIService;
   const dropdownRef = DropdownRef();
@@ -50,6 +51,25 @@ export default function SearchTrackOrMBID({
     []
   );
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRefLocal = useRef<HTMLInputElement>(null);
+
+  // Allow parents to focus on input
+  useImperativeHandle(
+    inputRefForParent,
+    () => {
+      return {
+        focus() {
+          inputRefLocal?.current?.focus();
+        },
+      };
+    },
+    []
+  );
+
+  // Autofocus once on load
+  useEffect(() => {
+    inputRefLocal?.current?.focus();
+  }, []);
 
   const handleError = useCallback(
     (error: string | Error, title?: string): void => {
@@ -180,6 +200,7 @@ export default function SearchTrackOrMBID({
     setInputValue("");
     setSearchResults([]);
     setSelectedIndex(-1);
+    inputRefLocal?.current?.focus();
   };
 
   useEffect(() => {
@@ -199,6 +220,7 @@ export default function SearchTrackOrMBID({
     <div>
       <div className="input-group dropdown-search" ref={dropdownRef}>
         <input
+          ref={inputRefLocal}
           type="search"
           value={inputValue}
           className="form-control"
@@ -261,4 +283,6 @@ export default function SearchTrackOrMBID({
       </div>
     </div>
   );
-}
+});
+
+export default SearchTrackOrMBID;