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

Make it possible to locally prevent event propagation #9749

Closed
wants to merge 2 commits into from
Closed

Make it possible to locally prevent event propagation #9749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dfc38e3
Make it possible to locally prevent event propagation
roryabraham Jul 6, 2022
ee60e74
Add window event listeners too
roryabraham Jul 12, 2022
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
7 changes: 5 additions & 2 deletions src/libs/KeyboardShortcut/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,11 @@ function bindHandlerToKeydownEvent(event) {
}

// Make sure we don't add multiple listeners
document.removeEventListener('keydown', bindHandlerToKeydownEvent, {capture: true});
document.addEventListener('keydown', bindHandlerToKeydownEvent, {capture: true});
const rootNode = document.getElementById('root');
rootNode.removeEventListener('keydown', bindHandlerToKeydownEvent);
rootNode.addEventListener('keydown', bindHandlerToKeydownEvent);
window.removeEventListener('keydown', bindHandlerToKeydownEvent);
window.addEventListener('keydown', bindHandlerToKeydownEvent);
Comment on lines +109 to +110
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe this code is not required. Could you explain why did you add this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't recall right now, but found that it was necessary in my testing, which was pretty thorough for the login page.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think the idea is that we establish these event handlers in the bubbling phase so that further down in the DOM we can prevent them from being triggered in the capture phase.

If you have a capture-phase handler at the document root, then there's no way to prevent it from executing first


/**
* Unsubscribes a keyboard event handler.
Expand Down
4 changes: 4 additions & 0 deletions src/pages/signin/ChangeExpensifyLoginLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const ChangeExpensifyLoginLink = props => (
<TouchableOpacity
style={[styles.link]}
onPress={Session.clearSignInData}
onKeyDownCapture={(e) => {
e.stopPropagation();
Session.clearSignInData();
}}
Comment on lines +43 to +46
Copy link
Contributor

Choose a reason for hiding this comment

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

I am not very confident about it as there is only single button on this page . What if we have multiples. We have to explicitly add this block of code to every such component?

eg:
Screenshot 2022-08-15 at 10 40 32 AM

Copy link
Member

Choose a reason for hiding this comment

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

I guess so but I don't have ideas on this. Rory will have better ideas on this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yeah, I think you would have to add this code to every such component OR create a wrapper component like FormPressable that has it built-in and use it for all pressables within forms

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we do the reverse? Create a form wrapper component and add onKeyDownCapture and check if the target is INPUT, TEXTAREA, SELECT and trigger the submit function. I believe this will fix the issue without any sideeffects.

Copy link
Contributor

Choose a reason for hiding this comment

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

POC: main...mdneyazahmad:App:fix/form-submit

Copy link
Collaborator

Choose a reason for hiding this comment

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

@roryabraham Are these changes you are expecting here?

POC: main...mdneyazahmad:App:fix/form-submit

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah that POC looks good to me 👍

underlayColor={themeColors.componentBG}
>
<Text style={[styles.link]}>
Expand Down
1 change: 1 addition & 0 deletions src/pages/signin/PasswordForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ class PasswordForm extends React.Component {
<View>
<Button
success
pressOnEnter
style={[styles.mv3]}
text={this.props.translate('common.signIn')}
isLoading={this.props.account.loading}
Expand Down