Wrong focus on close findbar (#1429)

* fix(findbar): Store element to focus after close findbar * fix(findbar): make prop not required on props * fix(findbar): add function to onclick method * fix(findbar): remove unnesesary hook adding event.target * fix(findbar): prettier fix * fix(findbar): check that focus exist * fix(findbar): update test * fix(findbar): update test since onFindbar toggle has attributtes * fix(findbar): renaming property because convention
box · Sep 20, 2021 · 8b6aff7 · 8b6aff7
1 parent 88c55d8
commit 8b6aff7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/lib/viewers/controls/findbar/FindBarToggle.tsx b/src/lib/viewers/controls/findbar/FindBarToggle.tsx
@@ -3,7 +3,7 @@ import IconSearch24 from '../icons/IconSearch24';
 import './FindBarToggle.scss';
 
 export type Props = {
-    onFindBarToggle?: () => void;
+    onFindBarToggle?: (buttonElement: EventTarget | null) => void;
 };
 
 export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element | null {
@@ -12,7 +12,12 @@ export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element |
     }
 
     return (
-        <button className="bp-FindBarToggle" onClick={onFindBarToggle} title={__('toggle_findbar')} type="button">
+        <button
+            className="bp-FindBarToggle"
+            onClick={({ target }): void => onFindBarToggle(target)}
+            title={__('toggle_findbar')}
+            type="button"
+        >
             <IconSearch24 />
         </button>
     );

diff --git a/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx b/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx
@@ -9,11 +9,12 @@ describe('FindBarToggle', () => {
     describe('event handlers', () => {
         test('should forward the click from the button', () => {
             const onToggle = jest.fn();
+            const mockedEvent = { target: document.createElement('button') };
             const wrapper = getWrapper({ onFindBarToggle: onToggle });
 
-            wrapper.simulate('click');
+            wrapper.simulate('click', mockedEvent);
 
-            expect(onToggle).toBeCalled();
+            expect(onToggle).toBeCalledWith(mockedEvent.target);
         });
     });
 

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -410,8 +410,8 @@ class DocBaseViewer extends BaseViewer {
     }
 
     handleFindBarClose() {
-        if (this.docEl) {
-            this.docEl.focus(); // Prevent focus from transferring to the root document element
+        if (this.findBarToggleEl && this.findBarToggleEl.focus) {
+            this.findBarToggleEl.focus();
         }
     }
 
@@ -1483,7 +1483,8 @@ class DocBaseViewer extends BaseViewer {
         this.pinchPage = null;
     }
 
-    toggleFindBar() {
+    toggleFindBar(findBarToggleEl) {
+        this.findBarToggleEl = findBarToggleEl;
         this.findBar.toggle();
     }