Fix: Creation of highlights on Edge/IE11/Firefox browsers (#322)

- Fixes text selection issues on IE/Edge
- Prevent focus change from removing highlight selection
- Bail if click is outside selection/highlight
- Double click to highlight on Edge
- Remove thread.scrollIntoView() call on render

src/__tests__/AnnotationThread-test.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-expressions */
+import * as ReactDOM from 'react-dom';
 import AnnotationThread from '../AnnotationThread';
 import * as util from '../util';
 import {
@@ -117,6 +118,19 @@ describe('AnnotationThread', () => {
         });
     });
 
+    describe('renderAnnotationPopover()', () => {
+        it('should render and display the popover for this annotation', () => {
+            thread.getPopoverParent = jest.fn().mockReturnValue(rootElement);
+            util.getPopoverLayer = jest.fn().mockReturnValue(rootElement);
+            util.shouldDisplayMobileUI = jest.fn().mockReturnValue(false);
+            ReactDOM.render = jest.fn();
+            thread.position = jest.fn();
+
+            thread.renderAnnotationPopover();
+            expect(thread.popoverComponent).not.toBeUndefined();
+        });
+    });
+
     describe('hide()', () => {
         it('should hide the thread element', () => {
             thread.unmountPopover = jest.fn();

src/_common.scss

@@ -14,8 +14,6 @@
     src: local('Lato Bold'), local('Lato-Bold'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff') format('woff');
 }
 
-@import '~box-react-ui/lib/styles/common/overlay';
-
 .ba {
     @include reset;
 
@@ -96,11 +94,6 @@
     @import '~box-react-ui/lib/styles/common/buttons';
 }
 
-.flyout-overlay {
-    @import '~box-react-ui/lib/styles/common/links';
-    @import '~box-react-ui/lib/styles/common/buttons';
-}
-
 /**************************************
  * Accessibility
  **************************************/

src/components/AnnotationPopover/AnnotationPopover.js

@@ -6,7 +6,6 @@ import PlainButton from 'box-react-ui/lib/components/plain-button';
 import IconClose from 'box-react-ui/lib/icons/general/IconClose';
 
 import Internationalize from '../Internationalize';
-import Overlay from './Overlay';
 import CommentList from '../CommentList';
 import { TYPES, CLASS_ANNOTATION_POPOVER, CLASS_ANNOTATION_CARET } from '../../constants';
 
@@ -19,6 +18,7 @@ const CLASS_ANIMATE_POPOVER = 'ba-animate-popover';
 const CLASS_CREATE_POPOVER = 'ba-create-popover';
 const CLASS_MOBILE_HEADER = 'ba-mobile-header';
 const CLASS_MOBILE_CLOSE_BTN = 'ba-mobile-close-btn';
+const CLASS_POPOVER_OVERLAY = 'ba-popover-overlay';
 
 type Props = {
     isMobile: boolean,
@@ -99,7 +99,7 @@ class AnnotationPopover extends React.PureComponent<Props> {
                     ) : (
                         <span className={CLASS_ANNOTATION_CARET} />
                     )}
-                    <Overlay shouldDefaultFocus={!isMobile}>
+                    <div className={CLASS_POPOVER_OVERLAY}>
                         {hasComments ? (
                             <CommentList comments={comments} onDelete={onDelete} />
                         ) : (
@@ -121,7 +121,7 @@ class AnnotationPopover extends React.PureComponent<Props> {
                                 onCommentClick={onCommentClick}
                             />
                         )}
-                    </Overlay>
+                    </div>
                 </div>
             </Internationalize>
         );

src/components/AnnotationPopover/AnnotationPopover.scss

@@ -40,7 +40,8 @@
         }
     }
 
-    .overlay {
+    .ba-popover-overlay {
+        background: white;
         border: 1px solid $seesee;
         border-radius: 4px;
         display: block;
@@ -50,7 +51,7 @@
         white-space: normal;
     }
 
-    .ba-inline-popover .overlay {
+    .ba-inline-popover .ba-popover-overlay {
         align-items: center;
         display: inline-flex;
     }

src/components/AnnotationPopover/__tests__/AnnotationPopover-test.js

@@ -73,24 +73,14 @@ describe('components/AnnotationPopover', () => {
         expect(wrapper.find('.ba-inline-popover').length).toEqual(1);
     });
 
-    test('should correctly render a BRUI Overlay if not on mobile', () => {
-        const wrapper = render({
-            canAnnotate: true,
-            comments,
-            isMobile: false
-        });
-        expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('Overlay').prop('shouldDefaultFocus')).toBeTruthy();
-    });
-
-    test('should correctly render a div without a Focus Trap if on mobile', () => {
+    test('should correctly render a div without a Focus Trap', () => {
         const wrapper = render({
             canAnnotate: true,
             comments,
             isMobile: true
         });
         expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('Overlay').prop('shouldDefaultFocus')).toBeFalsy();
+        expect(wrapper.find('Overlay').exists()).toBeFalsy();
     });
 
     test('should correctly render a popover with comments and reply textarea', () => {