MM-35320 Fix race condition when saving draft on tablets (#5379)

app/components/post_draft/post_input/post_input.js

@@ -10,6 +10,7 @@ import PasteableTextInput from '@components/pasteable_text_input';
 import {NavigationTypes} from '@constants';
 import DEVICE from '@constants/device';
 import {INSERT_TO_COMMENT, INSERT_TO_DRAFT} from '@constants/post_draft';
+import {debounce} from '@mm-redux/actions/helpers';
 import EventEmitter from '@mm-redux/utils/event_emitter';
 import {t} from '@utils/i18n';
 import {switchKeyboardForCodeBlocks} from '@utils/markdown';
@@ -86,7 +87,7 @@ export default class PostInput extends PureComponent {
         }
     };
 
-    changeDraft = (text) => {
+    changeDraft = debounce((text) => {
         const {
             channelId,
             handleCommentDraftChanged,
@@ -99,7 +100,7 @@ export default class PostInput extends PureComponent {
         } else {
             handlePostDraftChanged(channelId, text);
         }
-    };
+    }, 200);
 
     checkMessageLength = (value) => {
         const {intl} = this.context;
@@ -163,7 +164,7 @@ export default class PostInput extends PureComponent {
     };
 
     handleEndEditing = (e) => {
-        if (e && e.nativeEvent) {
+        if (e && e.nativeEvent && !DEVICE.IS_TABLET) {
             this.changeDraft(e.nativeEvent.text || '');
         }
     };
@@ -196,6 +197,9 @@ export default class PostInput extends PureComponent {
         } = this.props;
         this.value = value;
         updateInitialValue(value);
+        if (DEVICE.IS_TABLET) {
+            this.changeDraft(value);
+        }
 
         if (inputEventType) {
             EventEmitter.emit(inputEventType, value);

app/components/post_draft/post_input/post_input.test.js

@@ -4,7 +4,9 @@
 import React from 'react';
 import {Alert} from 'react-native';
 import {shallowWithIntl} from 'test/intl-test-helper';
+import TestHelper from 'test/test_helper';
 
+import Device from '@constants/device';
 import Preferences from '@mm-redux/constants/preferences';
 
 import PostInput from './post_input';
@@ -48,7 +50,7 @@ describe('PostInput', () => {
         expect(instance.changeDraft).not.toBeCalled();
     });
 
-    test('should emit the event and text is save to draft', () => {
+    test('should emit the event and text is save to draft', async () => {
         const wrapper = shallowWithIntl(
             <PostInput {...baseProps}/>,
         );
@@ -58,6 +60,7 @@ describe('PostInput', () => {
 
         instance.setValue(value);
         instance.handleAppStateChange('background');
+        await TestHelper.wait(200);
         expect(baseProps.handlePostDraftChanged).toHaveBeenCalledWith(baseProps.channelId, value);
         expect(baseProps.handlePostDraftChanged).toHaveBeenCalledTimes(1);
     });
@@ -76,5 +79,36 @@ describe('PostInput', () => {
         expect(Alert.alert).toBeCalled();
         expect(Alert.alert).toHaveBeenCalledTimes(1);
     });
+
+    test('should save the draft onChangeText for tablets', async () => {
+        Device.IS_TABLET = true;
+        const wrapper = shallowWithIntl(
+            <PostInput {...baseProps}/>,
+        );
+
+        const instance = wrapper.instance();
+        const value = 'some text';
+
+        instance.handleTextChange(value);
+        await TestHelper.wait(200);
+
+        expect(baseProps.handlePostDraftChanged).toBeCalled();
+        expect(baseProps.handlePostDraftChanged).toHaveBeenCalledTimes(1);
+    });
+
+    test('should not save the draft onEndEditing for tablets', async () => {
+        Device.IS_TABLET = true;
+        const wrapper = shallowWithIntl(
+            <PostInput {...baseProps}/>,
+        );
+
+        const instance = wrapper.instance();
+        const value = 'some text';
+
+        instance.handleEndEditing(value);
+        await TestHelper.wait(200);
+
+        expect(baseProps.handlePostDraftChanged).not.toBeCalled();
+    });
 });
 

app/constants/device.js

@@ -23,7 +23,7 @@ export default {
     DOCUMENTS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Documents`,
     IMAGES_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Images`,
     IS_IPHONE_WITH_INSETS: isPhoneWithInsets,
-    IS_TABLET: DeviceInfo.isTablet(),
+    IS_TABLET: isTablet,
     VIDEOS_PATH: `${RNFetchBlobFS.dirs.CacheDir}/Videos`,
     PERMANENT_SIDEBAR_SETTINGS: '@PERMANENT_SIDEBAR_SETTINGS',
     TABLET_WIDTH: 250,