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.

Sign up for GitHub

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

Jump to bottom

navigate to Search page after fully closing modal on keyboard shortcut #16381

Merged
merged 5 commits into from
Mar 27, 2023
Merged

navigate to Search page after fully closing modal on keyboard shortcut #16381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc927c5
navigate to Search page after fully closing modal on keyboard shortcut
situchan Mar 22, 2023
f995fd5
prevent focus on composer while emoji picker open and navigating from…
situchan Mar 22, 2023
e7a79eb
update Modal close function description
situchan Mar 22, 2023
3d958c1
rename onModalHideCallback to onModalCloseCallback
situchan Mar 23, 2023
ecbe591
Merge branch 'main' of https://github.com/situchan/Expensify into fix…
situchan Mar 23, 2023
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
10 changes: 8 additions & 2 deletions src/components/EmojiPicker/EmojiPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,19 @@ class EmojiPicker extends React.Component {
}
}

hideEmojiPicker() {
/**
* Hide the emoji picker menu.
*
* @param {Boolean} isNavigating
*/
hideEmojiPicker(isNavigating) {
if (isNavigating) { this.onModalHide = () => {}; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This clearing of function caused a bug when navigating to the search page. More details here #23959

this.emojiPopoverAnchor = null;
this.setState({isEmojiPickerVisible: false});
}

/**
* Show the ReportActionContextMenu modal popover.
* Show the emoji picker menu.
*
* @param {Function} [onModalHide=() => {}] - Run a callback when Modal hides.
* @param {Function} [onEmojiSelected=() => {}] - Run a callback when Emoji selected.
Expand Down
1 change: 1 addition & 0 deletions src/components/Modal/BaseModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ class BaseModal extends PureComponent {
if (callHideCallback) {
this.props.onModalHide();
}
Modal.onModalDidClose();
}

render() {
Expand Down
6 changes: 2 additions & 4 deletions src/libs/Navigation/AppNavigator/AuthScreens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,10 @@ class AuthScreens extends React.Component {
// the chat switcher, or new group chat
// based on the key modifiers pressed and the operating system
this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(searchShortcutConfig.shortcutKey, () => {
Modal.close();
Navigation.navigate(ROUTES.SEARCH);
Modal.close(() => Navigation.navigate(ROUTES.SEARCH));
}, searchShortcutConfig.descriptionKey, searchShortcutConfig.modifiers, true);
this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(groupShortcutConfig.shortcutKey, () => {
Modal.close();
Navigation.navigate(ROUTES.NEW_GROUP);
Modal.close(() => Navigation.navigate(ROUTES.NEW_GROUP));
}, groupShortcutConfig.descriptionKey, groupShortcutConfig.modifiers, true);
}

Expand Down
26 changes: 23 additions & 3 deletions src/libs/actions/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx';
import ONYXKEYS from '../../ONYXKEYS';

let closeModal;
let onModalClose;

/**
* Allows other parts of the app to call modal close function
Expand All @@ -12,9 +13,27 @@ function setCloseModal(onClose) {
closeModal = onClose;
}

function close() {
if (!closeModal) { return; }
closeModal();
/**
* Close modal in other parts of the app
*
* @param {Function} [onModalCloseCallback]
* @param {Boolean} isNavigating
*/
function close(onModalCloseCallback, isNavigating = true) {
if (!closeModal) {
// If modal is already closed, no need to wait for modal close. So immediately call callback.
if (onModalCloseCallback) { onModalCloseCallback(); }
onModalClose = null;
return;
}
onModalClose = onModalCloseCallback;
closeModal(isNavigating);
}

function onModalDidClose() {
if (!onModalClose) { return; }
onModalClose();
onModalClose = null;
}

/**
Expand All @@ -39,6 +58,7 @@ function willAlertModalBecomeVisible(isVisible) {
export {
setCloseModal,
close,
onModalDidClose,
setModalVisibility,
willAlertModalBecomeVisible,
};
Loading