fix(highlights): Manually apply focus to highlight target (#600)

Author: Conrad Chan

src/highlight/HighlightTarget.tsx

@@ -3,6 +3,7 @@ import * as ReactRedux from 'react-redux';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { getIsCurrentFileVersion } from '../store';
+import { MOUSE_PRIMARY } from '../constants';
 import { Rect } from '../@types/model';
 import './HighlightTarget.scss';
 
@@ -20,6 +21,13 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
     const { annotationId, className, onHover = noop, onSelect = noop, shapes } = props;
     const isCurrentFileVersion = ReactRedux.useSelector(getIsCurrentFileVersion);
 
+    const handleClick = (event: React.MouseEvent<HighlightTargetRef>): void => {
+        // These are needed to prevent the anchor link from being followed and updating the url location
+        event.preventDefault();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    };
+
     const handleFocus = (): void => {
         onSelect(annotationId);
     };
@@ -32,6 +40,26 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         onHover(null);
     };
 
+    const handleMouseDown = (event: React.MouseEvent<HighlightTargetRef>): void => {
+        if (event.buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+        const activeElement = document.activeElement as HTMLElement;
+
+        onSelect(annotationId);
+
+        event.preventDefault(); // Prevents focus from leaving the anchor immediately in some browsers
+        event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
+
+        // IE11 won't apply the focus to the SVG anchor, so this workaround attempts to blur the existing
+        // active element.
+        if (activeElement && activeElement !== event.currentTarget && activeElement.blur) {
+            activeElement.blur();
+        }
+
+        event.currentTarget.focus();
+    };
+
     return (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
         <a
@@ -42,7 +70,9 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
             data-resin-target="highlightText"
             data-testid={`ba-AnnotationTarget-${annotationId}`}
             href="#"
+            onClick={handleClick}
             onFocus={handleFocus}
+            onMouseDown={handleMouseDown}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             role="button"

src/highlight/__tests__/HighlightTarget-test.tsx

@@ -57,6 +57,65 @@ describe('HighlightTarget', () => {
             expect(defaults.onSelect).toHaveBeenCalledWith(defaults.annotationId);
         });
 
+        describe('handleMouseDown()', () => {
+            const mockEvent = {
+                buttons: 1,
+                currentTarget: {
+                    focus: jest.fn(),
+                },
+                preventDefault: jest.fn(),
+                nativeEvent: {
+                    stopImmediatePropagation: jest.fn(),
+                },
+            };
+
+            test('should do nothing if button is not MOUSE_PRIMARY', () => {
+                const wrapper = getWrapper();
+                const anchor = wrapper.find('a');
+                const event = {
+                    ...mockEvent,
+                    buttons: 2,
+                };
+
+                anchor.simulate('mousedown', event);
+
+                expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+                expect(mockEvent.nativeEvent.stopImmediatePropagation).not.toHaveBeenCalled();
+            });
+
+            test('should call onSelect', () => {
+                const wrapper = getWrapper();
+                const anchor = wrapper.find('a');
+                const event = {
+                    ...mockEvent,
+                    buttons: 1,
+                };
+
+                anchor.simulate('mousedown', event);
+
+                expect(defaults.onSelect).toHaveBeenCalledWith('123');
+                expect(mockEvent.preventDefault).toHaveBeenCalled();
+                expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
+                expect(mockEvent.currentTarget.focus).toHaveBeenCalled();
+            });
+
+            test('should call blur on the document.activeElement', () => {
+                const blurSpy = jest.spyOn(document.body, 'blur');
+                const wrapper = getWrapper();
+                const anchor = wrapper.find('a');
+                const event = {
+                    ...mockEvent,
+                    buttons: 1,
+                };
+
+                expect(document.activeElement).toBe(document.body);
+
+                anchor.simulate('mousedown', event);
+
+                expect(blurSpy).toHaveBeenCalled();
+            });
+        });
+
         describe('handleMouseEnter()', () => {
             test('should call onHover with annotationId', () => {
                 const wrapper = getWrapper();