chore: refactored onChange in search component

Author: ameerul-deriv

src/components/Search/Search.tsx

@@ -27,8 +27,8 @@ const Search = ({ delayTimer = 500, hideBorder = false, name, onSearch, placehol
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedOnSearch = useCallback(debounce(onSearch, delayTimer), [onSearch]);
 
-    const handleInputChange = (event: React.FormEvent<HTMLFormElement>) => {
-        const value = (event.target as HTMLInputElement).value;
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
         setSearchValue(value);
         debouncedOnSearch(value);
     };
@@ -39,12 +39,13 @@ const Search = ({ delayTimer = 500, hideBorder = false, name, onSearch, placehol
     };
 
     return (
-        <form className='search' onChange={event => handleInputChange(event)} role='search'>
+        <div className='search'>
             <Input
                 className={clsx({ 'border-none': hideBorder })}
                 label={placeholder}
                 leftPlaceholder={<LabelPairedSearchMdRegularIcon />}
                 name={name}
+                onChange={handleInputChange}
                 rightPlaceholder={
                     searchValue && (
                         <LegacyCloseCircle1pxIcon className='cursor-pointer' iconSize='xs' onClick={clearSearch} />
@@ -53,7 +54,7 @@ const Search = ({ delayTimer = 500, hideBorder = false, name, onSearch, placehol
                 type='search'
                 value={searchValue}
             />
-        </form>
+        </div>
     );
 };