Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

53182 submit button jump confirmation page #53529

Merged
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
20 commits
Select commit Hold shift click to select a range
8250f05
prevent submit button from jumping when proceeding to the confirmatio…
huult Dec 3, 2024
53a6a35
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 4, 2024
c0d30f7
Update dismiss keyboard for web
huult Dec 4, 2024
ca09e27
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 4, 2024
c6368a5
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 5, 2024
ff74004
Add keyboard dismiss for web
huult Dec 5, 2024
0a6cd9e
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 9, 2024
c01e82c
Specify dismiss keyboard behavior for Android native and Safari on mo…
huult Dec 9, 2024
94b8c83
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 10, 2024
cbfc0d2
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 14, 2024
ff4fb89
add listen dimention changes
huult Dec 14, 2024
babeb3f
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 18, 2024
a89ea97
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 19, 2024
65345c4
Check visual viewport before setting maxHeight
huult Dec 19, 2024
968a125
Use visual viewport to detect keyboard show/hide
huult Dec 19, 2024
9917a1b
Remove unused break line
huult Dec 19, 2024
2d002c6
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 19, 2024
38f9e8c
Merge remote-tracking branch 'upstream/main' into 53182-submit-button…
huult Dec 24, 2024
c25b460
fix eslint
huult Dec 24, 2024
6704403
Update return default customUnitRateID when report ID is undefined
huult Dec 24, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions src/pages/iou/request/step/IOURequestStepParticipants.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 18,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {Participant} from '@src/types/onyx/IOU';
import KeyboardUtils from '@src/utils/keyboard';
import StepScreenWrapper from './StepScreenWrapper';
import type {WithFullTransactionOrNotFoundProps} from './withFullTransactionOrNotFound';
import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
Expand Down Expand Up @@ -131,11 132,14 @@ function IOURequestStepParticipants({
transactionID,
selectedReportID.current || reportID,
);
if (isCategorizing) {
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, selectedReportID.current || reportID, iouConfirmationPageRoute));
} else {
Navigation.navigate(iouConfirmationPageRoute);
}

const route = isCategorizing
? ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, selectedReportID.current || reportID, iouConfirmationPageRoute)
: iouConfirmationPageRoute;

KeyboardUtils.dismiss().then(() => {
Navigation.navigate(route);
});
}, [iouType, transactionID, transaction, reportID, action, participants]);

const navigateBack = useCallback(() => {
Expand All @@ -153,7 157,9 @@ function IOURequestStepParticipants({
IOU.setCustomUnitRateID(transactionID, rateID);
IOU.setMoneyRequestParticipantsFromReport(transactionID, ReportUtils.getReport(selfDMReportID));
const iouConfirmationPageRoute = ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, CONST.IOU.TYPE.TRACK, transactionID, selfDMReportID);
Navigation.navigate(iouConfirmationPageRoute);
KeyboardUtils.dismiss().then(() => {
Navigation.navigate(iouConfirmationPageRoute);
});
};

useEffect(() => {
Expand Down
83 changes: 72 additions & 11 deletions src/utils/keyboard.ts
huult marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,32 1,93 @@
import {Keyboard} from 'react-native';
import {InteractionManager, Keyboard} from 'react-native';
import getPlatform from '@libs/getPlatform';
import CONST from '@src/CONST';

let isVisible = false;
let isNativeKeyboardVisible = false; // Native keyboard visibility
let isWebKeyboardOpen = false; // Web keyboard visibility
const isWeb = getPlatform() === CONST.PLATFORM.WEB;
/**
* Initializes native keyboard visibility listeners
*/
const initializeNativeKeyboardListeners = () => {
Keyboard.addListener('keyboardDidHide', () => {
isNativeKeyboardVisible = false;
});

Keyboard.addListener('keyboardDidShow', () => {
isNativeKeyboardVisible = true;
});
};

/**
* Checks if the given HTML element is a keyboard-related input
*/
const isKeyboardInput = (elem: HTMLElement): boolean =>
(elem.tagName === 'INPUT' && !['button', 'submit', 'checkbox', 'file', 'image'].includes((elem as HTMLInputElement).type)) || elem.hasAttribute('contenteditable');

huult marked this conversation as resolved.
Show resolved Hide resolved
Keyboard.addListener('keyboardDidHide', () => {
isVisible = false;
});
/**
* Initializes web-specific keyboard visibility listeners
*/
const initializeWebKeyboardListeners = () => {
if (typeof document === 'undefined' || !isWeb) {
return;
}

const handleFocusIn = (e: FocusEvent) => {
const target = e.target as HTMLElement;
if (target && isKeyboardInput(target)) {
isWebKeyboardOpen = true;
}
};

const handleFocusOut = (e: FocusEvent) => {
const target = e.target as HTMLElement;
if (target && isKeyboardInput(target)) {
isWebKeyboardOpen = false;
}
};

Keyboard.addListener('keyboardDidShow', () => {
isVisible = true;
});
document.addEventListener('focusin', handleFocusIn);
document.addEventListener('focusout', handleFocusOut);
};

/**
* Dismisses the keyboard and resolves the promise when the dismissal is complete
*/
const dismiss = (): Promise<void> => {
return new Promise((resolve) => {
if (!isVisible) {
resolve();
if (isWeb) {
if (!isWebKeyboardOpen) {
resolve();
return;
}

Keyboard.dismiss();
InteractionManager.runAfterInteractions(() => {
isWebKeyboardOpen = false;
resolve();
});

return;
}

if (!isNativeKeyboardVisible) {
resolve();
return;
}

const subscription = Keyboard.addListener('keyboardDidHide', () => {
resolve(undefined);
resolve();
subscription.remove();
});

Keyboard.dismiss();
});
};

// Initialize listeners for native and web
initializeNativeKeyboardListeners();
initializeWebKeyboardListeners();

const utils = {dismiss};

export default utils;
Loading