fix(reply): Fix at mention list misaligned after window resize

src/components/ReplyField/ReplyField.tsx

@@ -58,6 +58,13 @@ export default class ReplyField extends React.Component<Props, State> {
         fetchCollaborators(trimmedQuery);
     }, DEFAULT_COLLAB_DEBOUNCE);
 
+    handleResize = debounce(() => this.updatePopupReference(), 100);
+
+    componentDidMount(): void {
+        // The browser’s native zoom doesn’t always trigger Preview’s resize
+        window.addEventListener('resize', this.handleResize);
+    }
+
     componentDidUpdate({ editorState: prevEditorState }: Props): void {
         const { editorState } = this.props;
 
@@ -67,6 +74,7 @@ export default class ReplyField extends React.Component<Props, State> {
     }
 
     componentWillUnmount(): void {
+        window.removeEventListener('resize', this.handleResize);
         this.saveCursorPosition();
     }
 

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

@@ -65,6 +65,34 @@ describe('ReplyField', () => {
         });
     });
 
+    describe('componentDidMount()', () => {
+        test('should add resize window event listener', () => {
+            const instance = getWrapper().instance();
+
+            jest.spyOn(window, 'addEventListener');
+            jest.spyOn(instance, 'handleResize');
+
+            instance.componentDidMount();
+
+            expect(window.addEventListener).toHaveBeenCalledWith('resize', instance.handleResize);
+        });
+    });
+
+    describe('componentWillUnmount()', () => {
+        test('should remove resize event listener and save cursor position', () => {
+            const instance = getWrapper().instance();
+
+            jest.spyOn(window, 'removeEventListener');
+            jest.spyOn(instance, 'handleResize');
+            jest.spyOn(instance, 'saveCursorPosition');
+
+            instance.componentWillUnmount();
+
+            expect(window.removeEventListener).toHaveBeenCalledWith('resize', instance.handleResize);
+            expect(instance.saveCursorPosition).toHaveBeenCalled();
+        });
+    });
+
     describe('event handlers', () => {
         test('should handle the editor change event', () => {
             const wrapper = getWrapper();