From 2da46ebc7a068fb5aa6fe65f9f48a18ab74f994a Mon Sep 17 00:00:00 2001
From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com>
Date: Sat, 1 Jun 2024 18:42:01 -0400
Subject: [PATCH] Backport pull request #5610 from jellyfin-web/release-10.9.z

Fix Search Field for Tv Mode

Original-merge: 003bc94e024a6c84190ab7f4cd5bb8d0ba22ff9d

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/components/search/SearchFields.tsx | 12 ++--
 src/elements/emby-input/Input.tsx      | 84 +++++++++++++-------------
 2 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/components/search/SearchFields.tsx b/src/components/search/SearchFields.tsx
index 16b71d3d1e..d2be6c26b3 100644
--- a/src/components/search/SearchFields.tsx
+++ b/src/components/search/SearchFields.tsx
@@ -1,4 +1,4 @@
-import React, { type ChangeEvent, type FC, useCallback } from 'react';
+import React, { type ChangeEvent, type FC, useCallback, useRef } from 'react';
 
 import AlphaPicker from '../alphaPicker/AlphaPickerComponent';
 import Input from 'elements/emby-input/Input';
@@ -20,15 +20,18 @@ const SearchFields: FC<SearchFieldsProps> = ({
     onSearch = () => { /* no-op */ },
     query
 }: SearchFieldsProps) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
     const onAlphaPicked = useCallback((e: Event) => {
         const value = (e as CustomEvent).detail.value;
+        const inputValue = inputRef.current?.value || '';
 
         if (value === 'backspace') {
-            onSearch(query.length ? query.substring(0, query.length - 1) : '');
+            onSearch(inputValue.length ? inputValue.substring(0, inputValue.length - 1) : '');
         } else {
-            onSearch(query + value);
+            onSearch(inputValue + value);
         }
-    }, [ onSearch, query ]);
+    }, [onSearch]);
 
     const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
         onSearch(e.target.value);
@@ -43,6 +46,7 @@ const SearchFields: FC<SearchFieldsProps> = ({
                     style={{ marginBottom: 0 }}
                 >
                     <Input
+                        ref={inputRef}
                         id='searchTextInput'
                         className='searchfields-txtSearch'
                         type='text'
diff --git a/src/elements/emby-input/Input.tsx b/src/elements/emby-input/Input.tsx
index 63cde7084c..cc5fe6bf76 100644
--- a/src/elements/emby-input/Input.tsx
+++ b/src/elements/emby-input/Input.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { type DetailedHTMLProps, type InputHTMLAttributes, type FC, useState, useCallback } from 'react';
+import React, { type DetailedHTMLProps, type InputHTMLAttributes, useState, useCallback, forwardRef } from 'react';
 
 import './emby-input.scss';
 
@@ -8,52 +8,50 @@ interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElem
     label?: string
 }
 
-const Input: FC<InputProps> = ({
-    id,
-    label,
-    className,
-    onBlur,
-    onFocus,
-    ...props
-}) => {
-    const [ isFocused, setIsFocused ] = useState(false);
+const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ id, label, className, onBlur, onFocus, ...props }, ref) => {
+        const [isFocused, setIsFocused] = useState(false);
 
-    const onBlurInternal = useCallback(e => {
-        setIsFocused(false);
-        onBlur?.(e);
-    }, [ onBlur ]);
+        const onBlurInternal = useCallback(
+            (e) => {
+                setIsFocused(false);
+                onBlur?.(e);
+            },
+            [onBlur]
+        );
 
-    const onFocusInternal = useCallback(e => {
-        setIsFocused(true);
-        onFocus?.(e);
-    }, [ onFocus ]);
+        const onFocusInternal = useCallback(
+            (e) => {
+                setIsFocused(true);
+                onFocus?.(e);
+            },
+            [onFocus]
+        );
 
-    return (
-        <>
-            <label
-                htmlFor={id}
-                className={classNames(
-                    'inputLabel',
-                    {
+        return (
+            <>
+                <label
+                    htmlFor={id}
+                    className={classNames('inputLabel', {
                         inputLabelUnfocused: !isFocused,
                         inputLabelFocused: isFocused
-                    }
-                )}
-            >
-                {label}
-            </label>
-            <input
-                id={id}
-                className={classNames(
-                    'emby-input',
-                    className
-                )}
-                onBlur={onBlurInternal}
-                onFocus={onFocusInternal}
-                {...props}
-            />
-        </>
-    );
-};
+                    })}
+                >
+                    {label}
+                </label>
+                <input
+                    ref={ref}
+                    id={id}
+                    className={classNames('emby-input', className)}
+                    onBlur={onBlurInternal}
+                    onFocus={onFocusInternal}
+                    {...props}
+                />
+            </>
+        );
+    }
+);
+
+Input.displayName = 'Input';
 
 export default Input;