Fix: Unable to select drawing annotation after saving (#350)

src/AnnotationThread.js

@@ -535,7 +535,6 @@ class AnnotationThread extends EventEmitter {
         }
 
         this.show();
-        this.renderAnnotationPopover();
         this.emit(THREAD_EVENT.save);
     }
 

src/__tests__/AnnotationThread-test.js

@@ -268,7 +268,6 @@ describe('AnnotationThread', () => {
         beforeEach(() => {
             thread.api.create = jest.fn();
             thread.getThreadEventData = jest.fn().mockReturnValue({});
-            thread.renderAnnotationPopover = jest.fn();
             thread.comments = [tempAnnotation];
         });
 
@@ -291,15 +290,13 @@ describe('AnnotationThread', () => {
 
         it('should only render popover on desktop', () => {
             thread.updateTemporaryAnnotation(tempAnnotation.id, serverAnnotation);
-            expect(thread.renderAnnotationPopover).toBeCalled();
             expect(thread.state).toEqual(STATES.inactive);
         });
 
         it('should only render popover on mobile', () => {
             util.shouldDisplayMobileUI = jest.fn().mockReturnValue(true);
             thread.updateTemporaryAnnotation(tempAnnotation.id, serverAnnotation);
             expect(thread.state).toEqual(STATES.active);
-            expect(thread.renderAnnotationPopover).toBeCalled();
         });
     });
 

src/controllers/DrawingModeController.js

@@ -203,7 +203,7 @@ class DrawingModeController extends AnnotationModeController {
         location.maxY = location.y;
 
         // Create new thread with no annotations, show indicator, and show dialog
-        const thread = this.registerThread({
+        const threadParams = this.getThreadParams({
             id: AnnotationAPI.generateID(),
             type: this.mode,
             location,
@@ -215,6 +215,12 @@ class DrawingModeController extends AnnotationModeController {
             comments: []
         });
 
+        if (!threadParams) {
+            return;
+        }
+
+        const thread = this.instantiateThread(threadParams);
+
         if (!thread) {
             return;
         }
@@ -268,6 +274,8 @@ class DrawingModeController extends AnnotationModeController {
                 this.resetCurrentThread(thread);
                 this.unbindListeners();
 
+                this.registerThread(thread);
+
                 // Clear existing canvases
                 // eslint-disable-next-line
                 const pageEl = this.annotatedElement.querySelector(`[data-page-number="${thread.location.page}"]`);

src/controllers/__tests__/DrawingModeController-test.js

@@ -192,7 +192,8 @@ describe('controllers/DrawingModeController', () => {
             controller.getLocation = jest.fn();
             controller.currentThread = undefined;
             controller.locationFunction = jest.fn();
-            controller.registerThread = jest.fn().mockReturnValue(thread);
+            controller.getThreadParams = jest.fn().mockReturnValue({});
+            controller.instantiateThread = jest.fn().mockReturnValue(thread);
         });
 
         afterEach(() => {
@@ -203,7 +204,7 @@ describe('controllers/DrawingModeController', () => {
         it('should do nothing if drawing start is invalid', () => {
             controller.drawingStartHandler(event);
             expect(controller.getLocation).toBeCalled();
-            expect(controller.registerThread).not.toBeCalled();
+            expect(controller.instantiateThread).not.toBeCalled();
         });
 
         it('should continue drawing if in the middle of creating a new drawing', () => {
@@ -212,13 +213,12 @@ describe('controllers/DrawingModeController', () => {
             thread.getThreadEventData = jest.fn().mockReturnValue({});
 
             controller.drawingStartHandler(event);
-            expect(controller.registerThread).not.toBeCalled();
+            expect(controller.instantiateThread).not.toBeCalled();
             expect(thread.handleStart).toBeCalledWith(location);
         });
 
         it('should begin a new drawing thread if none exist already', () => {
             controller.getLocation = jest.fn().mockReturnValue(location);
-            controller.registerThread = jest.fn().mockReturnValue(thread);
             thread.getThreadEventData = jest.fn().mockReturnValue({});
 
             controller.drawingStartHandler(event);

src/doc/DocDrawingThread.js

@@ -376,6 +376,17 @@ class DocDrawingThread extends DrawingThread {
         popoverEl.style.left = `${popoverX}px`;
         popoverEl.style.top = `${popoverY}px`;
     };
+
+    /**
+     * Update annotation after successfully saved.
+     * @override
+     */
+    updateTemporaryAnnotation(tempAnnotationID: string, savedAnnotation: Annotation) {
+        super.updateTemporaryAnnotation(tempAnnotationID, savedAnnotation);
+
+        // Unmount the drawing annotation popover after successful save
+        this.unmountPopover();
+    }
 }
 
 export default DocDrawingThread;