Fix onAlphaPicked callback, the query (search term) is not updated Pr…

…operly
jellyfin · May 26, 2024 · a51d700 · a51d700
1 parent 61976b8
commit a51d700
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 50 deletions.
diff --git 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,19 @@ 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 +47,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
@@ -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 onBlurInternal = useCallback(e => {
-        setIsFocused(false);
-        onBlur?.(e);
-    }, [ onBlur ]);
-
-    const onFocusInternal = useCallback(e => {
-        setIsFocused(true);
-        onFocus?.(e);
-    }, [ onFocus ]);
-
-    return (
-        <>
-            <label
-                htmlFor={id}
-                className={classNames(
-                    'inputLabel',
-                    {
+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 onFocusInternal = useCallback(
+            (e) => {
+                setIsFocused(true);
+                onFocus?.(e);
+            },
+            [onFocus]
+        );
+
+        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;