fix: the reset text appears in the next input (#889)

- fix: even though reset the input with innerHTML, incomplete text
compositions from the previous input are displayed in the next input.

- ticket: [CLNP-1698]

[CLNP-1698]:
https://sendbird.atlassian.net/browse/CLNP-1698?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bang9

src/ui/MessageInput/index.tsx

@@ -19,6 +19,8 @@ import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { USER_MENTION_PREFIX } from '../../modules/Message/consts';
 import { TOKEN_TYPES } from '../../modules/Message/utils/tokens/types';
 import { checkIfFileUploadEnabled } from './messageInputUtils';
+import { isMobileIOS } from '../../utils/utils';
+
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { User } from '@sendbird/chat';
 import { OpenChannel } from '@sendbird/chat/openChannel';
@@ -460,7 +462,16 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                 && internalRef?.current?.textContent?.trim().length > 0
                 && e?.nativeEvent?.isComposing !== true
               ) {
-                e.preventDefault();
+                /**
+                 * NOTE: contentEditable does not work as expected in mobile WebKit(Safari).
+                 * Events and properties related to composing, necessary for combining characters like Hangul, also seem to be not handled properly.
+                 * When calling e.preventDefault(), it appears that string composition-related behaviors, in addition to the default actions, are also prevented. (maybe)
+                 *
+                 * Due to this issue, even though reset the input with innerHTML, incomplete text compositions from the previous input are displayed in the next input.
+                 * */
+                if (!isMobileIOS(navigator.userAgent)) {
+                  e.preventDefault();
+                }
                 sendMessage();
               }
               if (

src/utils/__tests__/utils.spec.ts

@@ -7,6 +7,7 @@ import {
   isMultipleFilesMessage,
 } from '../index';
 import { AdminMessage, FileMessage, MultipleFilesMessage, UserMessage } from '@sendbird/chat/message';
+import { isMobileIOS } from '../utils';
 
 describe('Global-utils', () => {
   it('should find right index with binarySearch', () => {
@@ -190,3 +191,25 @@ describe('isURL', () => {
     });
   });
 });
+
+describe('isMobileIOS', () => {
+  it('should return true for mobile webkit', () => {
+    const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148';
+    expect(isMobileIOS(userAgent)).toBe(true);
+  });
+
+  it('should return true for mobile safari', () => {
+    const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1';
+    expect(isMobileIOS(userAgent)).toBe(true);
+  });
+
+  it('should return true for ios mobile chrome', () => {
+    const chromeIOS = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.6099.101 Mobile/15E148 Safari/604.1';
+    expect(isMobileIOS(chromeIOS)).toBe(true);
+  });
+
+  it('should return false for android mobile chrome', () => {
+    const chromeAndroid = 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36';
+    expect(isMobileIOS(chromeAndroid)).toBe(false);
+  });
+});

src/utils/utils.ts

@@ -10,6 +10,13 @@ export const getSenderName = (message: SendableMessageType) => (
   )
 );
 export const isAboutSame = (a: number, b: number, px: number) => Math.abs(a - b) <= px;
+export const isMobileIOS = (userAgent: string) => {
+  const isIOS = /iPhone|iPad|iPod/i.test(userAgent);
+  const isWebkit = /WebKit/i.test(userAgent);
+  const isSafari = /Safari/i.test(userAgent);
+
+  return isIOS && (isWebkit || isSafari);
+};
 
 export default {
   getSenderName,