Merge pull request #255 from sendbird/feat/supprot-for-text-input-props

[CLNP-7474] feat: supprot-for-text-input-props

Author: OnestarLee

packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx

@@ -31,6 +31,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     autoFocus,
     mentionedUsers,
     inputDisabled,
+    partialTextInputProps,
   },
   ref,
 ) {
@@ -70,6 +71,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
+          {...partialTextInputProps}
           ref={ref}
           multiline
           disableFullscreenUI

packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
@@ -54,6 +55,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     messageToReply,
     setMessageToReply,
     messageForThread,
+    partialTextInputProps,
   },
   ref,
 ) {
@@ -116,7 +118,19 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       ...messageReplyParams,
     }).catch(onFailureToSend);
 
-    onChangeText('');
+    // On iOS with autoCorrect enabled, calling onChangeText('') immediately after sending
+    // can be ignored due to the keyboard's autocorrect not being committed yet.
+    // Delay the clear call slightly to allow the autocorrected text to be applied first.
+    if (Platform.OS === 'ios') {
+      const textInputRef = ref as React.MutableRefObject<RNTextInput | undefined>;
+      if (textInputRef.current) {
+        setTimeout(() => {
+          onChangeText('');
+        }, 10);
+      }
+    } else {
+      onChangeText('');
+    }
     setMessageToReply?.();
   };
 
@@ -186,6 +200,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       <View style={styles.sendInputContainer}>
         {AttachmentsButton && <AttachmentsButton onPress={() => openSheet({ sheetItems })} disabled={inputDisabled} />}
         <TextInput
+          {...partialTextInputProps}
           ref={ref}
           multiline
           disableFullscreenUI

packages/uikit-react-native/src/components/ChannelInput/index.tsx

@@ -1,5 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  View,
+} from 'react-native';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
@@ -79,6 +88,9 @@ export type ChannelInputProps = {
   AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
   MessageToReplyPreview?: (props: MessageToReplyPreviewProps) => React.ReactNode | null;
   VoiceMessageInput?: (props: VoiceMessageInputProps) => React.ReactNode | null;
+
+  // TextInput props - only safe properties that don't interfere with UIKit functionality
+  partialTextInputProps?: Partial<Pick<TextInputProps, 'autoCorrect'>>;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });

packages/uikit-react-native/src/domain/groupChannel/types.ts

@@ -53,6 +53,8 @@ export interface GroupChannelProps {
 
     searchItem?: GroupChannelProps['MessageList']['searchItem'];
 
+    partialTextInputProps?: GroupChannelProps['Input']['partialTextInputProps'];
+
     /**
      * @description You can specify the query parameters for the message list.
      * @example
@@ -111,7 +113,8 @@ export interface GroupChannelProps {
     | 'onPressUpdateUserMessage'
     | 'onPressUpdateFileMessage'
     | 'SuggestedMentionList'
-    | 'AttachmentsButton',
+    | 'AttachmentsButton'
+    | 'partialTextInputProps',
     'inputDisabled'
   >;
 

packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

@@ -70,6 +70,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     flatListComponent,
     flatListProps,
     messageListQueryParams,
+    partialTextInputProps,
     collectionCreator,
   }) => {
     const { playerService, recorderService } = usePlatformService();
@@ -341,6 +342,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onPressSendFileMessage={onPressSendFileMessage}
             onPressUpdateUserMessage={onPressUpdateUserMessage}
             onPressUpdateFileMessage={onPressUpdateFileMessage}
+            partialTextInputProps={partialTextInputProps}
           />
         </StatusComposition>
       </GroupChannelModule.Provider>