Fix issue handling event in search input (#656)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
artifacthub · Sep 17, 2020 · 193ee86 · 193ee86
1 parent 5793185
commit 193ee86
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 38 deletions.
diff --git a/web/src/layout/common/SearchBar.test.tsx b/web/src/layout/common/SearchBar.test.tsx
@@ -13,8 +13,6 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-let keyDownHandler: any;
-
 describe('SearchBar', () => {
   afterEach(() => {
     jest.resetAllMocks();
@@ -65,21 +63,12 @@ describe('SearchBar', () => {
   });
 
   describe('History push', () => {
-    beforeEach(() => {
-      const mockListener = jest.fn((e, handler) => {
-        if (e === 'keydown') {
-          keyDownHandler = handler;
-        }
-      });
-      window.addEventListener = mockListener;
-    });
-
     it('calls on Enter key press', () => {
       const { getByPlaceholderText } = render(<SearchBar tsQueryWeb="test" size="big" isSearching={false} />);
 
       const input = getByPlaceholderText('Search packages') as HTMLInputElement;
       fireEvent.change(input, { target: { value: 'testing' } });
-      keyDownHandler({ keyCode: 13, preventDefault: jest.fn() });
+      fireEvent.keyDown(input, { key: 'Enter', code: 13 });
       expect(input).not.toBe(document.activeElement);
       expect(mockHistoryPush).toHaveBeenCalledTimes(1);
       expect(mockHistoryPush).toHaveBeenCalledWith({
@@ -97,7 +86,7 @@ describe('SearchBar', () => {
 
       const input = getByPlaceholderText('Search packages') as HTMLInputElement;
       fireEvent.change(input, { target: { value: '' } });
-      keyDownHandler({ keyCode: 13, preventDefault: jest.fn() });
+      fireEvent.keyDown(input, { key: 'Enter', code: 13 });
       expect(mockHistoryPush).toHaveBeenCalledTimes(1);
       expect(mockHistoryPush).toHaveBeenCalledWith({
         pathname: '/packages/search',

diff --git a/web/src/layout/common/SearchBar.tsx b/web/src/layout/common/SearchBar.tsx
@@ -40,35 +40,26 @@ const SearchBar = (props: Props) => {
     }
   };
 
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      forceBlur();
+
+      history.push({
+        pathname: '/packages/search',
+        search: prepareQueryString({
+          pageNumber: 1,
+          tsQueryWeb: value || undefined,
+          filters: {},
+        }),
+      });
+    }
+  };
+
   useEffect(() => {
     setValue(props.tsQueryWeb || '');
   }, [props.tsQueryWeb]);
 
-  useEffect(() => {
-    const downHandler = (e: KeyboardEvent) => {
-      // When return key is pressed
-      if (e.keyCode === 13) {
-        e.preventDefault();
-        forceBlur();
-
-        history.push({
-          pathname: '/packages/search',
-          search: prepareQueryString({
-            pageNumber: 1,
-            tsQueryWeb: value || undefined,
-            filters: {},
-          }),
-        });
-      }
-    };
-
-    window.addEventListener('keydown', downHandler);
-
-    return () => {
-      window.removeEventListener('keydown', downHandler);
-    };
-  }, [history, value]);
-
   return (
     <>
       <div className={`position-relative ${props.formClassName}`}>
@@ -95,6 +86,7 @@ const SearchBar = (props: Props) => {
             aria-label="Search"
             value={value}
             onChange={onChange}
+            onKeyDown={onKeyDown}
             disabled={props.isSearching}
           />