feat(activeannotation): change active annotation id to null on blur (#442)

* feat(activeannotation): change active annotation id to null on blur

* chore: address PR comments

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: Conrad Chan

src/components/AnnotationTarget/AnnotationTarget.tsx

@@ -18,6 +18,12 @@ const AnnotationTarget = (props: Props, ref: React.Ref<HTMLAnchorElement>): JSX.
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
     };
+    const handleBlur = (event: React.SyntheticEvent): void => {
+        // Rely on the native browser blur of a focused element to determine when to de-select an annotation from
+        // being the active annotation id
+        cancelEvent(event);
+        onSelect(null);
+    };
     const handleClick = (event: React.MouseEvent): void => {
         cancelEvent(event);
         onSelect(annotationId);
@@ -42,6 +48,7 @@ const AnnotationTarget = (props: Props, ref: React.Ref<HTMLAnchorElement>): JSX.
             ref={ref}
             className={classNames('ba-AnnotationTarget', className)}
             href="#" // Needed for IE11 to handle click events properly
+            onBlur={handleBlur}
             onClick={handleClick}
             onFocus={handleFocus}
             onKeyPress={handleKeyPress}

src/components/AnnotationTarget/__tests__/AnnotationTarget-test.tsx

@@ -42,15 +42,20 @@ describe('AnnotationTarget', () => {
     });
 
     describe('mouse event handlers', () => {
-        test.each(['click', 'focus'])('should cancel the %s event and trigger onSelect', event => {
+        test.each`
+            event      | onSelectArgument
+            ${'blur'}  | ${null}
+            ${'click'} | ${'1'}
+            ${'focus'} | ${'1'}
+        `('should cancel the $event and trigger onSelect with $onSelectArgument', ({ event, onSelectArgument }) => {
             const wrapper = getWrapper();
 
             wrapper.simulate(event, mockEvent);
 
             expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
             expect(mockEvent.preventDefault).toHaveBeenCalled();
             expect(mockEvent.stopPropagation).toHaveBeenCalled();
-            expect(defaults.onSelect).toHaveBeenCalledWith('1');
+            expect(defaults.onSelect).toHaveBeenCalledWith(onSelectArgument);
         });
     });