Merge pull request #124 from pubnub/fix-emoji-focus

fix: focusing on MessageInput after selecting emoji

Author: Salet

.pubnub.yml

@@ -1,12 +1,19 @@
 ---
 name: pubnub-react-chat-components
-version: v0.29.0
+version: v0.30.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-07-20
+    version: v0.30.0
+    changes:
+      - type: bug
+        text: "Focusing on EmojiInput after selecting emoji only worked in certain cases."
+      - type: bug
+        text: "Console warnings about unknown attributes in MessageInput."
   - date: 2023-07-17
     version: v0.29.0
     changes:

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

packages/common/src/message-input/message-input.tsx

@@ -42,10 +42,9 @@ export interface CommonMessageInputProps {
  * Allows users to compose messages using text and emojis
  * and automatically publish them on PubNub channels upon sending.
  */
-export const useMessageInputCore = <T extends CommonMessageInputProps>(props: T) => {
+export const useMessageInputCore = (props: CommonMessageInputProps) => {
   const pubnub = usePubNub();
-
-  const { draftMessage, senderInfo, onSend, onBeforeSend, typingIndicator, ...inputProps } = props;
+  const { draftMessage, senderInfo, onSend, onBeforeSend, typingIndicator } = props;
 
   const [text, setText] = useState(draftMessage || "");
   const [file, setFile] = useState<File | UriFileInput>(null);
@@ -155,6 +154,5 @@ export const useMessageInputCore = <T extends CommonMessageInputProps>(props: T)
     theme,
     startTypingIndicator,
     stopTypingIndicator,
-    ...inputProps,
   };
 };

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/commonjs/index",

packages/react-native/src/message-input/message-input.tsx

@@ -44,6 +44,25 @@ export type MessageInputProps = CommonMessageInputProps & {
  * and automatically publish them on PubNub channels upon sending.
  */
 export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) => {
+  const {
+    actionsAfterInput,
+    disabled,
+    draftMessage,
+    extraActionsRenderer,
+    fileModalRenderer,
+    fileUpload,
+    onBeforeSend,
+    onChange,
+    onKeyPress,
+    onSend,
+    placeholder,
+    sendButton,
+    sendMessageOnSubmitEditing,
+    senderInfo,
+    typingIndicator,
+    ...otherTextInputProps
+  } = props;
+
   const {
     startTypingIndicator,
     stopTypingIndicator,
@@ -56,8 +75,8 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     file,
     setText,
     onError,
-    ...otherTextInputProps
-  } = useMessageInputCore(props);
+  } = useMessageInputCore({ draftMessage, senderInfo, onSend, onBeforeSend, typingIndicator });
+
   const style = useStyle<MessageInputStyle>({
     theme,
     createDefaultStyle,
@@ -125,20 +144,20 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
 
   const handleInputChange = (newText: string) => {
     try {
-      if (props.typingIndicator) {
+      if (typingIndicator) {
         newText.length ? startTypingIndicator() : stopTypingIndicator();
       }
-      props.onChange && props.onChange(newText);
+      onChange && onChange(newText);
       setText(newText);
     } catch (e) {
       onError(e);
     }
   };
 
   const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-    props.onKeyPress && props.onKeyPress(e);
+    onKeyPress && onKeyPress(e);
 
-    if (e.nativeEvent.key == "Enter" && props.sendMessageOnSubmitEditing) {
+    if (e.nativeEvent.key == "Enter" && sendMessageOnSubmitEditing) {
       sendMessage();
     }
   };
@@ -150,8 +169,8 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   const renderSendButton = () => {
     return (
       <TouchableOpacity onPress={sendMessage} testID="message-input-send">
-        {props.sendButton ? (
-          props.sendButton
+        {sendButton ? (
+          sendButton
         ) : isValidInputText() ? (
           <Image style={style.icon} source={{ uri: AirplaneActiveIcon }} />
         ) : (
@@ -171,7 +190,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         ) : (
           <View>
             <>
-              {props.fileUpload === "image" ? (
+              {fileUpload === "image" ? (
                 <TouchableOpacity
                   style={style.messageInputFileLabel}
                   onPress={pickPhoto}
@@ -196,8 +215,8 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   };
 
   const renderFileModal = () => {
-    if (props.fileModalRenderer) {
-      return props.fileModalRenderer({ pickDocument, pickPhoto, modalVisible, setModalVisible });
+    if (fileModalRenderer) {
+      return fileModalRenderer({ pickDocument, pickPhoto, modalVisible, setModalVisible });
     }
 
     return (
@@ -213,32 +232,30 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
 
   const renderActions = () => (
     <>
-      {!props.disabled && props.fileUpload && renderFileUpload()}
-      {props.extraActionsRenderer && (
-        <View style={style.extraActions}>{props.extraActionsRenderer()}</View>
-      )}
+      {!disabled && fileUpload && renderFileUpload()}
+      {extraActionsRenderer && <View style={style.extraActions}>{extraActionsRenderer()}</View>}
     </>
   );
 
   return (
     <View style={style.messageInputWrapper}>
       {renderFileModal()}
-      {!props.actionsAfterInput && renderActions()}
+      {!actionsAfterInput && renderActions()}
       <TextInput
         {...otherTextInputProps}
         testID="message-input"
         autoComplete="off"
         multiline={true}
         onChangeText={handleInputChange}
-        placeholder={props.placeholder}
+        placeholder={placeholder}
         style={style.messageInput}
         placeholderTextColor={style.messageInputPlaceholder.color}
-        editable={!props.disabled && file == null}
+        editable={!disabled && file == null}
         value={text}
         onKeyPress={handleKeyPress}
       />
-      {props.actionsAfterInput && renderActions()}
-      {!props.disabled && (
+      {actionsAfterInput && renderActions()}
+      {!disabled && (
         <View style={style.sendButton}>
           {loader ? (
             <Animated.Image

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

packages/react/src/message-input/message-input.tsx

@@ -48,6 +48,25 @@ export type MessageInputProps = CommonMessageInputProps & {
  * and automatically publish them on PubNub channels upon sending.
  */
 export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) => {
+  const {
+    actionsAfterInput,
+    disabled,
+    draftMessage,
+    emojiPicker,
+    extraActionsRenderer,
+    fileUpload,
+    hideSendButton,
+    onBeforeSend,
+    onChange,
+    onKeyPress,
+    onSend,
+    placeholder,
+    sendButton,
+    senderInfo,
+    typingIndicator,
+    ...otherTextAreaProps
+  } = props;
+
   const {
     clearInput,
     file,
@@ -61,11 +80,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     theme,
     startTypingIndicator,
     stopTypingIndicator,
-    fileUpload,
-    sendButton,
-    hideSendButton,
-    ...otherTextAreaProps
-  } = useMessageInputCore(props);
+  } = useMessageInputCore({ draftMessage, senderInfo, onSend, onBeforeSend, typingIndicator });
 
   const [emojiPickerShown, setEmojiPickerShown] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -98,10 +113,10 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     try {
       const { value: newText } = event.target;
-      if (props.typingIndicator) {
+      if (typingIndicator) {
         newText.length ? startTypingIndicator() : stopTypingIndicator();
       }
-      props.onChange && props.onChange(event);
+      onChange && onChange(event);
       setText(newText);
     } catch (e) {
       onError(e);
@@ -115,7 +130,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         sendMessage();
         if (fileRef.current) fileRef.current.value = "";
       }
-      props.onKeyPress && props.onKeyPress(event);
+      onKeyPress && onKeyPress(event);
     } catch (e) {
       onError(e);
     }
@@ -142,7 +157,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
         if (!("native" in emoji)) return;
         setText((text) => text + emoji.native);
         setEmojiPickerShown(false);
-        if (fileRef.current) inputRef.current.focus();
+        if (inputRef.current) inputRef.current.focus();
       } catch (e) {
         onError(e);
       }
@@ -205,9 +220,9 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
           <div
             className="pn-msg-input__emoji-picker"
             ref={pickerRef}
-            style={props.actionsAfterInput ? { left: "unset" } : { right: "unset" }}
+            style={actionsAfterInput ? { left: "unset" } : { right: "unset" }}
           >
-            {React.cloneElement(props.emojiPicker, { onEmojiSelect: handleEmojiInsertion })}
+            {React.cloneElement(emojiPicker, { onEmojiSelect: handleEmojiInsertion })}
           </div>
         )}
       </>
@@ -217,39 +232,37 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
   const renderActions = () => (
     <div className="pn-msg-input__icons">
       <div className="pn-msg-input__emoji-toggle">
-        {!props.disabled && props.emojiPicker && renderEmojiPicker()}
+        {!disabled && emojiPicker && renderEmojiPicker()}
       </div>
-      {!props.disabled && fileUpload && renderFileUpload()}
-      {props.extraActionsRenderer && props.extraActionsRenderer()}
+      {!disabled && fileUpload && renderFileUpload()}
+      {extraActionsRenderer && extraActionsRenderer()}
     </div>
   );
 
   return (
     <div
-      className={`pn-msg-input pn-msg-input--${theme} ${
-        props.disabled ? "pn-msg-input--disabled" : ""
-      }`}
+      className={`pn-msg-input pn-msg-input--${theme} ${disabled ? "pn-msg-input--disabled" : ""}`}
     >
       <div className="pn-msg-input__wrapper">
-        {!props.actionsAfterInput && renderActions()}
+        {!actionsAfterInput && renderActions()}
         <textarea
           {...otherTextAreaProps}
           className="pn-msg-input__textarea"
           data-testid="message-input"
-          disabled={props.disabled || !!file}
+          disabled={disabled || !!file}
           onChange={handleInputChange}
           onKeyPress={handleKeyPress}
-          placeholder={props.placeholder}
+          placeholder={placeholder}
           ref={inputRef}
           rows={1}
           value={text}
         />
-        {props.actionsAfterInput && renderActions()}
-        {!hideSendButton && !props.disabled && (
+        {actionsAfterInput && renderActions()}
+        {!hideSendButton && !disabled && (
           <button
             aria-label="Send"
             className={`pn-msg-input__send ${isValidInputText() && "pn-msg-input__send--active"}`}
-            disabled={loader || props.disabled}
+            disabled={loader || disabled}
             onClick={handleSendClick}
             title="Send"
           >