fix(reply): Debounce resize

box · Jan 29, 2021 · db59dcb · db59dcb
1 parent 77ef280
commit db59dcb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/ReplyField/ReplyField.tsx b/src/components/ReplyField/ReplyField.tsx
@@ -38,6 +38,7 @@ export type State = {
 };
 
 export const DEFAULT_COLLAB_DEBOUNCE = 500;
+export const RESIZE_WAIT_TIME_IN_MILLIS = 100;
 
 export default class ReplyField extends React.Component<Props, State> {
     static defaultProps = {
@@ -59,7 +60,7 @@ export default class ReplyField extends React.Component<Props, State> {
     }, DEFAULT_COLLAB_DEBOUNCE);
 
     componentDidMount(): void {
-        window.addEventListener('resize', this.updatePopupReference);
+        window.addEventListener('resize', this.debouncedUpdatePopup);
     }
 
     componentDidUpdate({ editorState: prevEditorState }: Props): void {
@@ -71,7 +72,7 @@ export default class ReplyField extends React.Component<Props, State> {
     }
 
     componentWillUnmount(): void {
-        window.removeEventListener('resize', this.updatePopupReference);
+        window.removeEventListener('resize', this.debouncedUpdatePopup);
         this.saveCursorPosition();
     }
 
@@ -111,6 +112,8 @@ export default class ReplyField extends React.Component<Props, State> {
         this.setState({ popupReference: activeMention ? this.getVirtualElement(activeMention) : null });
     };
 
+    debouncedUpdatePopup = debounce(this.updatePopupReference, RESIZE_WAIT_TIME_IN_MILLIS); // eslint-disable-line react/sort-comp
+
     saveCursorPosition = (): void => {
         const { editorState, setCursorPosition } = this.props;
 

diff --git a/src/components/ReplyField/__tests__/ReplyField-test.tsx b/src/components/ReplyField/__tests__/ReplyField-test.tsx
@@ -70,11 +70,11 @@ describe('ReplyField', () => {
             const instance = getWrapper().instance();
 
             jest.spyOn(window, 'addEventListener');
-            jest.spyOn(instance, 'updatePopupReference');
+            jest.spyOn(instance, 'debouncedUpdatePopup');
 
             instance.componentDidMount();
 
-            expect(window.addEventListener).toHaveBeenCalledWith('resize', instance.updatePopupReference);
+            expect(window.addEventListener).toHaveBeenCalledWith('resize', instance.debouncedUpdatePopup);
         });
     });
 
@@ -83,12 +83,12 @@ describe('ReplyField', () => {
             const instance = getWrapper().instance();
 
             jest.spyOn(window, 'removeEventListener');
-            jest.spyOn(instance, 'updatePopupReference');
+            jest.spyOn(instance, 'debouncedUpdatePopup');
             jest.spyOn(instance, 'saveCursorPosition');
 
             instance.componentWillUnmount();
 
-            expect(window.removeEventListener).toHaveBeenCalledWith('resize', instance.updatePopupReference);
+            expect(window.removeEventListener).toHaveBeenCalledWith('resize', instance.debouncedUpdatePopup);
             expect(instance.saveCursorPosition).toHaveBeenCalled();
         });
     });