From a51d700eff9cc1230cba495d6405906b7c628f57 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Sun, 26 May 2024 20:04:16 +0300
Subject: [PATCH 1/2] Fix onAlphaPicked callback, the query (search term) is
 not updated Properly

---
 src/components/search/SearchFields.tsx | 13 ++--
 src/elements/emby-input/Input.tsx      | 84 +++++++++++++-------------
 2 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/src/components/search/SearchFields.tsx b/src/components/search/SearchFields.tsx
index 16b71d3d1e..8de9f1680e 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,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
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;

From c135be012cfcd6f63a6b6130692431cb5daa823b Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Thu, 30 May 2024 15:39:25 +0300
Subject: [PATCH 2/2] apply suggestion

---
 src/components/search/SearchFields.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/search/SearchFields.tsx b/src/components/search/SearchFields.tsx
index 8de9f1680e..d2be6c26b3 100644
--- a/src/components/search/SearchFields.tsx
+++ b/src/components/search/SearchFields.tsx
@@ -27,8 +27,7 @@ const SearchFields: FC<SearchFieldsProps> = ({
         const inputValue = inputRef.current?.value || '';
 
         if (value === 'backspace') {
-            onSearch(inputValue.length ? inputValue.substring(0, inputValue.length - 1) : ''
-            );
+            onSearch(inputValue.length ? inputValue.substring(0, inputValue.length - 1) : '');
         } else {
             onSearch(inputValue + value);
         }