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

Add support for auxclick event #11571

Merged
merged 4 commits into from Aug 3, 2018
Merged

Add support for auxclick event #11571

merged 4 commits into from Aug 3, 2018

Conversation

@jquense
Copy link
Collaborator

@jquense jquense commented Nov 16, 2017

Adds support for auxclick. The little polyfill may be overkill, but it was simple enough to do so i put it in. Do we want to handle this or leave it up to users and add auxclick to the SimpleEvent plugin?

closes #8529

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Nov 16, 2017

Good question... How much do we want React to polyfill browser behavior? How do we decide what to polyfill?

Loading

@aweary
Copy link
Contributor

@aweary aweary commented Nov 16, 2017

Historically, we've avoided adding events that we couldn't polyfill, so IMO we definitely need to include this polyfill and make sure this works in unsupported browsers like IE.

Loading

@jquense
Copy link
Collaborator Author

@jquense jquense commented Nov 16, 2017

A complicating factor with this event is that it was added along a side a change to click events, where they no longer fire for the middle mouse button. So even if it wasn't polyfillable i think there'd be a stronger case to add it (or use it to "fix" the click event)

Loading

nativeEvent: MouseEvent,
nativeEventTarget: EventTarget,
) {
if (topLevelType === 'topClick' && nativeEvent.button === 0) {
Copy link
Contributor

@nhunzaker nhunzaker Nov 16, 2017

Choose a reason for hiding this comment

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

When is button not 0? Does this account for right clicks? Is that even a problem?

Loading

Copy link
Collaborator Author

@jquense jquense Nov 22, 2017

Choose a reason for hiding this comment

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

this is any click that isn't a left click yeah. which is correct going off the mdn example https://mdn.github.io/dom-examples/auxclick/

Loading

Copy link
Contributor

@nhunzaker nhunzaker left a comment

Is it worth having a fixtures to test this in browsers that don't have auxclick?

Loading

@jquense
Copy link
Collaborator Author

@jquense jquense commented Nov 22, 2017

probably not worth the fixture? I'm not sure what it'd test that the unit test doesn't cover?

Loading

@jquense
Copy link
Collaborator Author

@jquense jquense commented Nov 22, 2017

one open question here: should the "polyfill" do something more advanced in the case where auxclick is support to prevent a case where click and auxclick both fire? I don't know if that will be the case ever, right now FF and Chrome both don't fire click anymore for none left clicks so it isn't an issue

Loading

@gaearon
Copy link
Member

@gaearon gaearon commented Jan 5, 2018

I'm very hesitant about adding more event polyfills given the focus on the bundle size.
What's the minimal constrained version we could do that would work only on supported browsers?

Loading

@jquense
Copy link
Collaborator Author

@jquense jquense commented Jan 5, 2018

Minimimum is to add it the SimpleEventPlugin, and let the user handle the polyfill, e.g. listen for both click and auxclick

Loading

@gaearon
Copy link
Member

@gaearon gaearon commented Jan 5, 2018

That sounds okay as the first step to me.

Loading

Copy link
Member

@gaearon gaearon left a comment

Let's start with just passing it through

Loading

Copy link
Contributor

@nhunzaker nhunzaker left a comment

Seems like this could be moved through really quickly with a few changes. @jquense I'd be happy to pick this up tomorrow if you'd like.

Loading

@@ -136,7 +137,7 @@ const topLevelEventsToDispatchConfig: {
});

// Only used in DEV for exhaustiveness validation.
const knownHTMLTopLevelTypes = [
let knownHTMLTopLevelTypes = __DEV__ && [
Copy link
Contributor

@nhunzaker nhunzaker Aug 3, 2018

Choose a reason for hiding this comment

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

Can this be reverted?

Loading

@@ -256,7 +259,7 @@ const SimpleEventPlugin: PluginModule<MouseEvent> = {
break;
default:
if (__DEV__) {
if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
if ((knownHTMLTopLevelTypes: any).indexOf(topLevelType) === -1) {
Copy link
Contributor

@nhunzaker nhunzaker Aug 3, 2018

Choose a reason for hiding this comment

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

This too?

Loading

@@ -217,6 +219,7 @@ const SimpleEventPlugin: PluginModule<MouseEvent> = {
case 'topMouseOut':
case 'topMouseOver':
case 'topContextMenu':

Copy link
Contributor

@nhunzaker nhunzaker Aug 3, 2018

Choose a reason for hiding this comment

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

Could you nix this space?

Loading

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 3, 2018

Upstreamed this with master. @gaearon do you mind taking a second look?

Loading

gaearon
gaearon approved these changes Aug 3, 2018
Copy link
Member

@gaearon gaearon left a comment

Sounds good if it works in manual testing

Loading

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 3, 2018

@gaearon pushed a commit after some local testing. Just had to add aux click to the list of interactive event types (great change, @philipp-spiess btw)

Loading

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 3, 2018

Waiting on CI for good measure, then I'll merge.

Loading

@gaearon
Copy link
Member

@gaearon gaearon commented Aug 3, 2018

Need to update snapshots.

Loading

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 3, 2018

Huzzah.

Loading

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 3, 2018

All set. Thanks @jquense!

Loading

@nhunzaker nhunzaker merged commit ac72388 into master Aug 3, 2018
1 check passed
Loading
@jquense
Copy link
Collaborator Author

@jquense jquense commented Aug 3, 2018

thanks for cleaning this up @nhunzaker !

Loading

@jquense jquense deleted the auxclick branch Aug 3, 2018
TejasQ pushed a commit to TejasQ/react that referenced this issue Aug 26, 2018
* Add support for auxclick event

* Add to simpleEventPLugin

* Add auxclick as interactive event type in SimpleEventPlugin

* Update ReactTestUtils fixture to include auxClick
@gaearon gaearon mentioned this pull request Sep 5, 2018
ljharb added a commit to enzymejs/enzyme that referenced this issue Sep 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

5 participants