React: Feature Request: Support auxclick event (onAuxClick)

[foray1010]

Version 15.4.1

As starting Chrome 55, there is a new event auxclick to handle middle click, and click doesn't trigger by middle click anymore
https://developers.google.com/web/updates/2016/10/auxclick

[JKillian]

Middle-clicking in our app broke as of Chrome 55 because of this. Would appreciate auxclick support in order to make it work correctly again!

[ostigley]

I found the same problem, but came up with the following work around, using refs.

In the following, this.title and this.image are refs on the <h4> and <img> components.

componentDidMount() {
    const isChrome = !!window.chrome && !!window.chrome.webstore;

    const auxclick = element => element.addEventListener('auxclick', () =>
      window.open(`/stories/${this.props.storyId}/show`, '_blank')
    );

    if (isChrome) {
      auxclick(this.title);
      auxclick(this.image);
    }
  }

Obviously you can put whatever you want in your addEventListerner callback. It's working really well so far. 🌭

[jquense]

jeez this is annoying.

@nhunzaker @sebmarkbage @aweary Should we "fix" this in an event plugin or simply add the new event? I'm guessing that middle button clicks are explicitly specced so this doesn't count as breaking, but jeez

[mk0x9]

B-bump. It would be really nice to have auxclick in react...

[sebmarkbage]

@jquense This came up with regard to active/passive events too. If an intervention came as a result of something that isn't common in the React ecosystem, then we can probably "fix" it. However, this seems like something that would be relevant to us. So we should probably follow along and add another event?

[nhunzaker]

Fixed by https://github.com/facebook/react/pull/11571

[justingrant]

FYI, if anyone else gets tripped up (like I was) because Safari still sends click instead of auxclick in response to a middle-button click, here's a workaround. Hope this is useful for the next victim: https://stackoverflow.com/questions/59556495/how-to-run-common-code-before-all-onclick-handlers-in-a-react-app-to-work-arou