From b388c9dfbad3b2f838b50a65dc27a6d80148f309 Mon Sep 17 00:00:00 2001 From: OnestarLee Date: Tue, 26 Aug 2025 10:57:18 +0900 Subject: [PATCH 1/3] chore: add support for partial TextInput properties in EditInput and SendInput components --- .../src/components/ChannelInput/EditInput.tsx | 2 ++ .../src/components/ChannelInput/SendInput.tsx | 2 ++ .../uikit-react-native/src/components/ChannelInput/index.tsx | 5 ++++- packages/uikit-react-native/src/domain/groupChannel/types.ts | 3 ++- 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx index 52f0fd52e..656ef6bf9 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx +++ b/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx @@ -31,6 +31,7 @@ const EditInput = forwardRef(function EditInput( autoFocus, mentionedUsers, inputDisabled, + partialTextInputProps, }, ref, ) { @@ -70,6 +71,7 @@ const EditInput = forwardRef(function EditInput( (function SendInput( messageToReply, setMessageToReply, messageForThread, + partialTextInputProps, }, ref, ) { @@ -186,6 +187,7 @@ const SendInput = forwardRef(function SendInput( {AttachmentsButton && openSheet({ sheetItems })} disabled={inputDisabled} />} 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>; }; const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false }); diff --git a/packages/uikit-react-native/src/domain/groupChannel/types.ts b/packages/uikit-react-native/src/domain/groupChannel/types.ts index 961398e89..a0d533d95 100644 --- a/packages/uikit-react-native/src/domain/groupChannel/types.ts +++ b/packages/uikit-react-native/src/domain/groupChannel/types.ts @@ -111,7 +111,8 @@ export interface GroupChannelProps { | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' - | 'AttachmentsButton', + | 'AttachmentsButton' + | 'partialTextInputProps', 'inputDisabled' >; From 6e659efaf77403dd9a539ecba498ebd6d60c89a2 Mon Sep 17 00:00:00 2001 From: OnestarLee Date: Tue, 26 Aug 2025 15:53:10 +0900 Subject: [PATCH 2/3] fix: improve handling of autocorrect when sending input on iOS --- .../src/components/ChannelInput/SendInput.tsx | 15 ++++++++++++++- .../src/components/ChannelInput/index.tsx | 11 ++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx index dee4e9397..98abbe665 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx +++ b/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, @@ -117,7 +118,19 @@ const SendInput = forwardRef(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; + if (textInputRef.current) { + setTimeout(() => { + onChangeText(''); + }, 10); + } + } else { + onChangeText(''); + } setMessageToReply?.(); }; diff --git a/packages/uikit-react-native/src/components/ChannelInput/index.tsx b/packages/uikit-react-native/src/components/ChannelInput/index.tsx index 9e8c7321a..1596c6a62 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/index.tsx +++ b/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, TextInputProps, 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 { From 68d5be2b4c8723a134c13b53cbec4e0abc011f8d Mon Sep 17 00:00:00 2001 From: OnestarLee Date: Tue, 26 Aug 2025 16:04:36 +0900 Subject: [PATCH 3/3] feat: add textInputProps to support custom TextInput behavior in GroupChannel (e.g. autoCorrect) --- packages/uikit-react-native/src/domain/groupChannel/types.ts | 2 ++ .../src/fragments/createGroupChannelFragment.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/uikit-react-native/src/domain/groupChannel/types.ts b/packages/uikit-react-native/src/domain/groupChannel/types.ts index a0d533d95..59d0def25 100644 --- a/packages/uikit-react-native/src/domain/groupChannel/types.ts +++ b/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 diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx index 5afbe201a..88bdce944 100644 --- a/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx +++ b/packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx @@ -70,6 +70,7 @@ const createGroupChannelFragment = (initModule?: Partial): G flatListComponent, flatListProps, messageListQueryParams, + partialTextInputProps, collectionCreator, }) => { const { playerService, recorderService } = usePlatformService(); @@ -341,6 +342,7 @@ const createGroupChannelFragment = (initModule?: Partial): G onPressSendFileMessage={onPressSendFileMessage} onPressUpdateUserMessage={onPressUpdateUserMessage} onPressUpdateFileMessage={onPressUpdateFileMessage} + partialTextInputProps={partialTextInputProps} />