From e7d6ad21a2175177239ac08a0c9fcc110ed547c6 Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Wed, 18 Oct 2023 14:02:59 +0530
Subject: [PATCH 1/2] suggestions position fix

---
 .../ReportActionCompose.js                    | 220 +++++++++---------
 1 file changed, 111 insertions(+), 109 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index dd4d51653546..c3db8b54730a 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -342,120 +342,122 @@ function ReportActionCompose({
     }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]);
 
     return (
-        <View
-            ref={containerRef}
-            style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}
-        >
-            <PortalHost name="suggestions" />
-            <OfflineWithFeedback
-                pendingAction={pendingAction}
-                style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
-                contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
-            >
+        <View style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
+            <OfflineWithFeedback pendingAction={pendingAction}>
                 {shouldShowReportRecipientLocalTime && hasReportRecipient && <ParticipantLocalTime participant={reportRecipient} />}
-                <View
-                    style={[
-                        shouldUseFocusedColor ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
-                        styles.flexRow,
-                        styles.chatItemComposeBox,
-                        isComposerFullSize && styles.chatItemFullComposeBox,
-                        hasExceededMaxCommentLength && styles.borderColorDanger,
-                    ]}
+            </OfflineWithFeedback>
+            <View>
+                <PortalHost name="suggestions" />
+                <OfflineWithFeedback
+                    pendingAction={pendingAction}
+                    style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
+                    contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
                 >
-                    <AttachmentModal
-                        headerTitle={translate('reportActionCompose.sendAttachment')}
-                        onConfirm={addAttachment}
-                        onModalShow={() => setIsAttachmentPreviewActive(true)}
-                        onModalHide={onAttachmentPreviewClose}
+                    <View
+                        ref={containerRef}
+                        style={[
+                            shouldUseFocusedColor ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                            styles.flexRow,
+                            styles.chatItemComposeBox,
+                            isComposerFullSize && styles.chatItemFullComposeBox,
+                            hasExceededMaxCommentLength && styles.borderColorDanger,
+                        ]}
                     >
-                        {({displayFileInModal}) => (
-                            <>
-                                <AttachmentPickerWithMenuItems
-                                    displayFileInModal={displayFileInModal}
-                                    reportID={reportID}
-                                    report={report}
-                                    reportParticipantIDs={reportParticipantIDs}
-                                    isFullComposerAvailable={isFullComposerAvailable}
-                                    isComposerFullSize={isComposerFullSize}
-                                    updateShouldShowSuggestionMenuToFalse={updateShouldShowSuggestionMenuToFalse}
-                                    isBlockedFromConcierge={isBlockedFromConcierge}
-                                    disabled={disabled}
-                                    setMenuVisibility={setMenuVisibility}
-                                    isMenuVisible={isMenuVisible}
-                                    onTriggerAttachmentPicker={onTriggerAttachmentPicker}
-                                    onCanceledAttachmentPicker={restoreKeyboardState}
-                                    onMenuClosed={restoreKeyboardState}
-                                    onAddActionPressed={onAddActionPressed}
-                                    onItemSelected={onItemSelected}
-                                    actionButtonRef={actionButtonRef}
-                                />
-                                <ComposerWithSuggestions
-                                    ref={composerRef}
-                                    animatedRef={animatedRef}
-                                    suggestionsRef={suggestionsRef}
-                                    isNextModalWillOpenRef={isNextModalWillOpenRef}
-                                    reportID={reportID}
-                                    report={report}
-                                    reportActions={reportActions}
-                                    isMenuVisible={isMenuVisible}
-                                    inputPlaceholder={inputPlaceholder}
-                                    isComposerFullSize={isComposerFullSize}
-                                    displayFileInModal={displayFileInModal}
-                                    textInputShouldClear={textInputShouldClear}
-                                    setTextInputShouldClear={setTextInputShouldClear}
-                                    isBlockedFromConcierge={isBlockedFromConcierge}
-                                    disabled={disabled}
-                                    isFullComposerAvailable={isFullComposerAvailable}
-                                    setIsFullComposerAvailable={setIsFullComposerAvailable}
-                                    setIsCommentEmpty={setIsCommentEmpty}
-                                    handleSendMessage={handleSendMessage}
-                                    shouldShowComposeInput={shouldShowComposeInput}
-                                    onFocus={onFocus}
-                                    onBlur={onBlur}
-                                    measureParentContainer={measureContainer}
-                                    listHeight={listHeight}
-                                />
-                                <ReportDropUI
-                                    onDrop={(e) => {
-                                        if (isAttachmentPreviewActive) {
-                                            return;
-                                        }
-                                        const data = lodashGet(e, ['dataTransfer', 'items', 0]);
-                                        displayFileInModal(data);
-                                    }}
-                                />
-                            </>
+                        <AttachmentModal
+                            headerTitle={translate('reportActionCompose.sendAttachment')}
+                            onConfirm={addAttachment}
+                            onModalShow={() => setIsAttachmentPreviewActive(true)}
+                            onModalHide={onAttachmentPreviewClose}
+                        >
+                            {({displayFileInModal}) => (
+                                <>
+                                    <AttachmentPickerWithMenuItems
+                                        displayFileInModal={displayFileInModal}
+                                        reportID={reportID}
+                                        report={report}
+                                        reportParticipantIDs={reportParticipantIDs}
+                                        isFullComposerAvailable={isFullComposerAvailable}
+                                        isComposerFullSize={isComposerFullSize}
+                                        updateShouldShowSuggestionMenuToFalse={updateShouldShowSuggestionMenuToFalse}
+                                        isBlockedFromConcierge={isBlockedFromConcierge}
+                                        disabled={disabled}
+                                        setMenuVisibility={setMenuVisibility}
+                                        isMenuVisible={isMenuVisible}
+                                        onTriggerAttachmentPicker={onTriggerAttachmentPicker}
+                                        onCanceledAttachmentPicker={restoreKeyboardState}
+                                        onMenuClosed={restoreKeyboardState}
+                                        onAddActionPressed={onAddActionPressed}
+                                        onItemSelected={onItemSelected}
+                                        actionButtonRef={actionButtonRef}
+                                    />
+                                    <ComposerWithSuggestions
+                                        ref={composerRef}
+                                        animatedRef={animatedRef}
+                                        suggestionsRef={suggestionsRef}
+                                        isNextModalWillOpenRef={isNextModalWillOpenRef}
+                                        reportID={reportID}
+                                        report={report}
+                                        reportActions={reportActions}
+                                        isMenuVisible={isMenuVisible}
+                                        inputPlaceholder={inputPlaceholder}
+                                        isComposerFullSize={isComposerFullSize}
+                                        displayFileInModal={displayFileInModal}
+                                        textInputShouldClear={textInputShouldClear}
+                                        setTextInputShouldClear={setTextInputShouldClear}
+                                        isBlockedFromConcierge={isBlockedFromConcierge}
+                                        disabled={disabled}
+                                        isFullComposerAvailable={isFullComposerAvailable}
+                                        setIsFullComposerAvailable={setIsFullComposerAvailable}
+                                        setIsCommentEmpty={setIsCommentEmpty}
+                                        handleSendMessage={handleSendMessage}
+                                        shouldShowComposeInput={shouldShowComposeInput}
+                                        onFocus={onFocus}
+                                        onBlur={onBlur}
+                                        measureParentContainer={measureContainer}
+                                        listHeight={listHeight}
+                                    />
+                                    <ReportDropUI
+                                        onDrop={(e) => {
+                                            if (isAttachmentPreviewActive) {
+                                                return;
+                                            }
+                                            const data = lodashGet(e, ['dataTransfer', 'items', 0]);
+                                            displayFileInModal(data);
+                                        }}
+                                    />
+                                </>
+                            )}
+                        </AttachmentModal>
+                        {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : (
+                            <EmojiPickerButton
+                                isDisabled={isBlockedFromConcierge || disabled}
+                                onModalHide={focus}
+                                onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)}
+                                emojiPickerID={report.reportID}
+                            />
                         )}
-                    </AttachmentModal>
-                    {DeviceCapabilities.canUseTouchScreen() && isMediumScreenWidth ? null : (
-                        <EmojiPickerButton
-                            isDisabled={isBlockedFromConcierge || disabled}
-                            onModalHide={focus}
-                            onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)}
-                            emojiPickerID={report.reportID}
+                        <SendButton
+                            isDisabled={isSendDisabled}
+                            handleSendMessage={handleSendMessage}
                         />
-                    )}
-                    <SendButton
-                        isDisabled={isSendDisabled}
-                        handleSendMessage={handleSendMessage}
-                    />
-                </View>
-                <View
-                    style={[
-                        styles.flexRow,
-                        styles.justifyContentBetween,
-                        styles.alignItemsCenter,
-                        (!isSmallScreenWidth || (isSmallScreenWidth && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
-                    ]}
-                >
-                    {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
-                    <ReportTypingIndicator reportID={reportID} />
-                    <ExceededCommentLength
-                        reportID={reportID}
-                        onExceededMaxCommentLength={setExceededMaxCommentLength}
-                    />
-                </View>
-            </OfflineWithFeedback>
+                    </View>
+                    <View
+                        style={[
+                            styles.flexRow,
+                            styles.justifyContentBetween,
+                            styles.alignItemsCenter,
+                            (!isSmallScreenWidth || (isSmallScreenWidth && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
+                        ]}
+                    >
+                        {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
+                        <ReportTypingIndicator reportID={reportID} />
+                        <ExceededCommentLength
+                            reportID={reportID}
+                            onExceededMaxCommentLength={setExceededMaxCommentLength}
+                        />
+                    </View>
+                </OfflineWithFeedback>
+            </View>
         </View>
     );
 }

From 5f10ae2da23250b0305e21f564d271e98295480e Mon Sep 17 00:00:00 2001
From: Pujan <shahpujan1992@gmail.com>
Date: Wed, 25 Oct 2023 18:04:30 +0530
Subject: [PATCH 2/2] parent view grow

---
 .../home/report/ReportActionCompose/ReportActionCompose.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index c3db8b54730a..891f7fbc903b 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -346,7 +346,7 @@ function ReportActionCompose({
             <OfflineWithFeedback pendingAction={pendingAction}>
                 {shouldShowReportRecipientLocalTime && hasReportRecipient && <ParticipantLocalTime participant={reportRecipient} />}
             </OfflineWithFeedback>
-            <View>
+            <View style={isComposerFullSize ? styles.flex1 : {}}>
                 <PortalHost name="suggestions" />
                 <OfflineWithFeedback
                     pendingAction={pendingAction}