Backport pull request #5610 from jellyfin-web/release-10.9.z

Fix Search Field for Tv Mode

Original-merge: 003bc94e02

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

Backported-by: Joshua M. Boniface <joshua@boniface.me>

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'

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> = ({
+const Input = forwardRef<HTMLInputElement, InputProps>(
-    id,
+    ({ id, label, className, onBlur, onFocus, ...props }, ref) => {
-    label,
+        const [isFocused, setIsFocused] = useState(false);
-    className,
-    onBlur,
-    onFocus,
-    ...props
-}) => {
-    const [ isFocused, setIsFocused ] = useState(false);
 
-    const onBlurInternal = useCallback(e => {
+        const onBlurInternal = useCallback(
+            (e) => {
                 setIsFocused(false);
                 onBlur?.(e);
-    }, [ onBlur ]);
+            },
+            [onBlur]
+        );
 
-    const onFocusInternal = useCallback(e => {
+        const onFocusInternal = useCallback(
+            (e) => {
                 setIsFocused(true);
                 onFocus?.(e);
-    }, [ onFocus ]);
+            },
+            [onFocus]
+        );
 
         return (
             <>
                 <label
                     htmlFor={id}
-                className={classNames(
+                    className={classNames('inputLabel', {
-                    'inputLabel',
-                    {
                         inputLabelUnfocused: !isFocused,
                         inputLabelFocused: isFocused
-                    }
+                    })}
-                )}
                 >
                     {label}
                 </label>
                 <input
+                    ref={ref}
                     id={id}
-                className={classNames(
+                    className={classNames('emby-input', className)}
-                    'emby-input',
-                    className
-                )}
                     onBlur={onBlurInternal}
                     onFocus={onFocusInternal}
                     {...props}
                 />
             </>
         );
-};
+    }
+);
+
+Input.displayName = 'Input';
 
 export default Input;