Merge pull request metabrainz#2948 from metabrainz/search-input-focus

Autofocus on search input in MBIDMapping modal
Aerozol · Aug 5, 2024 · 2ad5b45 · 2ad5b45
2 parents dd38e1e + 336e68e
commit 2ad5b45
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;