Skip to content

Commit

Permalink
Merge pull request #50003 from Expensify/revert-32711-fix/10731-chat-…
Browse files Browse the repository at this point in the history
…composer-behavior

[CP] Revert "fix: 10731 Focus composer without showing keyboard when users go to chats"
  • Loading branch information
Beamanator authored Oct 1, 2024
2 parents 3b9223c + 6e509c1 commit 0077235
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 37 deletions.
16 changes: 1 addition & 15 deletions src/components/Composer/index.native.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import type {MarkdownStyle} from '@expensify/react-native-live-markdown';
import mimeDb from 'mime-db';
import type {ForwardedRef} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native';
import {StyleSheet} from 'react-native';
import type {FileObject} from '@components/AttachmentModal';
import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput';
import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useKeyboardState from '@hooks/useKeyboardState';
import useMarkdownStyle from '@hooks/useMarkdownStyle';
import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useStyleUtils from '@hooks/useStyleUtils';
Expand Down Expand Up @@ -38,7 +37,6 @@ function Composer(
selection,
value,
isGroupPolicyReport = false,
showSoftInputOnFocus,
...props
}: ComposerProps,
ref: ForwardedRef<TextInput>,
Expand All @@ -50,11 +48,8 @@ function Composer(
const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const [contextMenuHidden, setContextMenuHidden] = useState(!showSoftInputOnFocus);

const {inputCallbackRef, inputRef: autoFocusInputRef} = useAutoFocusInput();
const keyboardState = useKeyboardState();
const isKeyboardShown = keyboardState?.isKeyboardShown ?? false;

useEffect(() => {
if (autoFocus === !!autoFocusInputRef.current) {
Expand Down Expand Up @@ -114,13 +109,6 @@ function Composer(
const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]);

useEffect(() => {
if (!showSoftInputOnFocus || !isKeyboardShown) {
return;
}
setContextMenuHidden(false);
}, [showSoftInputOnFocus, isKeyboardShown]);

return (
<RNMarkdownTextInput
multiline
Expand All @@ -147,8 +135,6 @@ function Composer(
props?.onBlur?.(e);
}}
onClear={onClear}
showSoftInputOnFocus={showSoftInputOnFocus}
contextMenuHidden={contextMenuHidden}
/>
);
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/Composer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ function Composer(
isComposerFullSize = false,
shouldContainScroll = true,
isGroupPolicyReport = false,
showSoftInputOnFocus = true,
...props
}: ComposerProps,
ref: ForwardedRef<TextInput | HTMLInputElement>,
Expand Down Expand Up @@ -389,7 +388,6 @@ function Composer(
value={value}
defaultValue={defaultValue}
autoFocus={autoFocus}
inputMode={!showSoftInputOnFocus ? 'none' : 'text'}
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...props}
onSelectionChange={addCursorPositionToSelectionChange}
Expand Down
2 changes: 0 additions & 2 deletions src/components/Composer/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> & {

/** Indicates whether the composer is in a group policy report. Used for disabling report mentioning style in markdown input */
isGroupPolicyReport?: boolean;

showSoftInputOnFocus?: boolean;
};

export type {TextSelection, ComposerProps, CustomSelectionChangeEvent};
2 changes: 2 additions & 0 deletions src/pages/home/ReportScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro

const {reportPendingAction, reportErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
const isEmptyChat = useMemo(() => ReportUtils.isEmptyReport(report), [report]);
const isOptimisticDelete = report?.statusNum === CONST.REPORT.STATUS_NUM.CLOSED;
const indexOfLinkedMessage = useMemo(
(): number => reportActions.findIndex((obj) => String(obj.reportActionID) === String(reportActionIDFromRoute)),
Expand Down Expand Up @@ -801,6 +802,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
policy={policy}
pendingAction={reportPendingAction}
isComposerFullSize={!!isComposerFullSize}
isEmptyChat={isEmptyChat}
lastReportAction={lastReportAction}
workspaceTooltip={workspaceTooltip}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Browser from '@libs/Browser';
import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
import {forceClearInput} from '@libs/ComponentUtils';
import * as ComposerUtils from '@libs/ComposerUtils';
import convertToLTRForComposer from '@libs/convertToLTRForComposer';
Expand All @@ -39,6 +40,7 @@ import getPlatform from '@libs/getPlatform';
import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener';
import Parser from '@libs/Parser';
import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
import updateMultilineInputRange from '@libs/updateMultilineInputRange';
import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
Expand All @@ -64,6 +66,9 @@ type SyncSelection = {
type NewlyAddedChars = {startIndex: number; endIndex: number; diff: string};

type ComposerWithSuggestionsOnyxProps = {
/** The parent report actions for the report */
parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;

/** The modal state */
modal: OnyxEntry<OnyxTypes.Modal>;

Expand Down Expand Up @@ -145,12 +150,22 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps &
/** Whether the edit is focused */
editFocused: boolean;

/** Wheater chat is empty */
isEmptyChat?: boolean;

/** The last report action */
lastReportAction?: OnyxEntry<OnyxTypes.ReportAction>;

/** Whether to include chronos */
includeChronos?: boolean;

/** The parent report action ID */
parentReportActionID?: string;

/** The parent report ID */
// eslint-disable-next-line react/no-unused-prop-types -- its used in the withOnyx HOC
parentReportID: string | undefined;

/** Whether report is from group policy */
isGroupPolicyReport: boolean;

Expand Down Expand Up @@ -196,6 +211,10 @@ const debouncedBroadcastUserIsTyping = lodashDebounce(

const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();

// We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
// prevent auto focus on existing chat for mobile device
const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();

/**
* This component holds the value and selection state.
* If a component really needs access to these state values it should be put here.
Expand All @@ -207,11 +226,14 @@ function ComposerWithSuggestions(
// Onyx
modal,
preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE,
parentReportActions,

// Props: Report
reportID,
includeChronos,
isEmptyChat,
lastReportAction,
parentReportActionID,
isGroupPolicyReport,
policyID,

Expand Down Expand Up @@ -276,13 +298,17 @@ function ComposerWithSuggestions(
const {shouldUseNarrowLayout} = useResponsiveLayout();
const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;

const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused;
const parentReportAction = parentReportActions?.[parentReportActionID ?? '-1'];
const shouldAutoFocus =
!modal?.isVisible &&
Modal.areAllModalsHidden() &&
isFocused &&
(shouldFocusInputOnScreenFocus || (isEmptyChat && !ReportActionsUtils.isTransactionThread(parentReportAction))) &&
shouldShowComposeInput;

const valueRef = useRef(value);
valueRef.current = value;

const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(false);

const [selection, setSelection] = useState<TextSelection>(() => ({start: value.length, end: value.length, positionX: 0, positionY: 0}));

const [composerHeight, setComposerHeight] = useState(0);
Expand Down Expand Up @@ -772,19 +798,6 @@ function ComposerWithSuggestions(
shouldCalculateCaretPosition
onLayout={onLayout}
onScroll={hideSuggestionMenu}
showSoftInputOnFocus={showSoftInputOnFocus}
onTouchStart={() => {
if (showSoftInputOnFocus) {
return;
}
if (Browser.isMobileSafari()) {
setTimeout(() => {
setShowSoftInputOnFocus(true);
}, CONST.ANIMATED_TRANSITION);
return;
}
setShowSoftInputOnFocus(true);
}}
shouldContainScroll={Browser.isMobileSafari()}
isGroupPolicyReport={isGroupPolicyReport}
/>
Expand Down Expand Up @@ -835,6 +848,11 @@ export default withOnyx<ComposerWithSuggestionsProps & RefAttributes<ComposerRef
editFocused: {
key: ONYXKEYS.INPUT_FOCUSED,
},
parentReportActions: {
key: ({parentReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
canEvict: false,
initWithStoredValues: false,
},
})(memo(ComposerWithSuggestionsWithRef));

export type {ComposerWithSuggestionsProps, ComposerRef};
13 changes: 11 additions & 2 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import useNetwork from '@hooks/useNetwork';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import {getDraftComment} from '@libs/DraftCommentUtils';
import getModalState from '@libs/getModalState';
Expand Down Expand Up @@ -63,7 +64,7 @@ type SuggestionsRef = {
};

type ReportActionComposeProps = WithCurrentUserPersonalDetailsProps &
Pick<ComposerWithSuggestionsProps, 'reportID' | 'isComposerFullSize' | 'lastReportAction'> & {
Pick<ComposerWithSuggestionsProps, 'reportID' | 'isEmptyChat' | 'isComposerFullSize' | 'lastReportAction'> & {
/** A method to call when the form is submitted */
onSubmit: (newComment: string) => void;

Expand All @@ -89,6 +90,10 @@ type ReportActionComposeProps = WithCurrentUserPersonalDetailsProps &
shouldShowEducationalTooltip?: boolean;
};

// We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
// prevent auto focus on existing chat for mobile device
const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();

const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();

// eslint-disable-next-line import/no-mutable-exports
Expand All @@ -103,6 +108,7 @@ function ReportActionCompose({
report,
reportID,
isReportReadyForDisplay = true,
isEmptyChat,
lastReportAction,
shouldShowEducationalTooltip,
onComposerFocus,
Expand All @@ -123,7 +129,7 @@ function ReportActionCompose({
*/
const [isFocused, setIsFocused] = useState(() => {
const initialModalState = getModalState();
return shouldShowComposeInput && !initialModalState?.isVisible && !initialModalState?.willAlertModalBecomeVisible;
return shouldFocusInputOnScreenFocus && shouldShowComposeInput && !initialModalState?.isVisible && !initialModalState?.willAlertModalBecomeVisible;
});
const [isFullComposerAvailable, setIsFullComposerAvailable] = useState(isComposerFullSize);
const [shouldHideEducationalTooltip, setShouldHideEducationalTooltip] = useState(false);
Expand Down Expand Up @@ -459,8 +465,11 @@ function ReportActionCompose({
raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
reportID={reportID}
policyID={report?.policyID ?? '-1'}
parentReportID={report?.parentReportID}
parentReportActionID={report?.parentReportActionID}
includeChronos={ReportUtils.chatIncludesChronos(report)}
isGroupPolicyReport={isGroupPolicyReport}
isEmptyChat={isEmptyChat}
lastReportAction={lastReportAction}
isMenuVisible={isMenuVisible}
inputPlaceholder={inputPlaceholder}
Expand Down
6 changes: 6 additions & 0 deletions src/pages/home/report/ReportFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ type ReportFooterProps = {
/** Whether to show educational tooltip in workspace chat for first-time user */
workspaceTooltip: OnyxEntry<OnyxTypes.WorkspaceTooltip>;

/** Whether the chat is empty */
isEmptyChat?: boolean;

/** The pending action when we are adding a chat */
pendingAction?: PendingAction;

Expand All @@ -70,6 +73,7 @@ function ReportFooter({
report = {reportID: '-1'},
reportMetadata,
policy,
isEmptyChat = true,
isReportReadyForDisplay = true,
isComposerFullSize = false,
workspaceTooltip,
Expand Down Expand Up @@ -220,6 +224,7 @@ function ReportFooter({
onComposerBlur={onComposerBlur}
reportID={report.reportID}
report={report}
isEmptyChat={isEmptyChat}
lastReportAction={lastReportAction}
pendingAction={pendingAction}
isComposerFullSize={isComposerFullSize}
Expand All @@ -241,6 +246,7 @@ export default memo(
lodashIsEqual(prevProps.report, nextProps.report) &&
prevProps.pendingAction === nextProps.pendingAction &&
prevProps.isComposerFullSize === nextProps.isComposerFullSize &&
prevProps.isEmptyChat === nextProps.isEmptyChat &&
prevProps.lastReportAction === nextProps.lastReportAction &&
prevProps.isReportReadyForDisplay === nextProps.isReportReadyForDisplay &&
prevProps.workspaceTooltip?.shouldShow === nextProps.workspaceTooltip?.shouldShow &&
Expand Down

0 comments on commit 0077235

Please sign in to comment.