React: Polyfill MouseEvent.buttons for Safari

[sagendejonge]

During mouse move event, 'e.buttons' returns 'undefined' in Safari. Behaving correctly in Chrome. While pressing the left mouse button and moving the mouse expect 'e.buttons' to return 1. 'e.nativeEvent.which' returns the correct result on Safari.

Sample Code:

import React from 'react';

export default class Canvas extends React.Component {
  constructor(props) {
    super(props);
  }

  mouseDown(e) {
    console.log("mouse down", e.buttons, e.nativeEvent.which);
  }

  mouseMove(e) {
    console.log("mouse move", e.buttons, e.nativeEvent.which);
  }

  mouseUp(e) {
    console.log("mouse up", e.buttons, e.nativeEvent.which);
  }

  render() {
    var canvasStyle = {
      backgroundColor: 'rgba(0, 0, 255, 0.5)',
      position: 'absolute',
      top: '0px',
      left: '0px',
      width: '100%',
      height: '100%'
    }

    return (
      <div>
        <canvas id="canvas" style={canvasStyle}
          onMouseDown={this.mouseDown.bind(this)}
          onMouseMove={this.mouseMove.bind(this)}
          onMouseUp={this.mouseUp.bind(this)}>
        </canvas>
      </div>
    );
  }
}

Versions
React: 15.1.0
Safari: 9.1.1 (11601.6.17)

OS
OS X El Capitan Version 10.11.5

Computer
Model Name: MacBook Air
Model Identifier: MacBookAir6,2
Processor Name: Intel Core i7
Processor Speed: 1.7 GHz
Number of Processors: 1
Total Number of Cores: 2
L2 Cache (per Core): 256 KB
L3 Cache: 4 MB
Memory: 8 GB

[aweary]

It looks like Safari doesn't support MouseEvent.buttons https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons, so a polyfill would be required. Safari does have the non-standard MouseEvent.which property but it doesn't support detecting 4th and 5th buttons (back and forward usually).

[sagendejonge]

In the documentation it says SyntheticEvent is a cross-browser wrapper that works identically across all browsers. So doesn't that mean that buttons should return the same value regardless of the browser where possible?

[aweary]

Right, that's exactly what that means. But currently React doesn't polyfill MouseEvent.buttons right now which it should if it could be done in a reasonable way. The issue I see is that implementing that polyfill might be difficult.

[sagendejonge]

I see ok, good to know we're on the same page. Right now just doing a workaround but if I come up with anything I'll post it here.

[bugdanov]

@aweary a polyfill cannot detect a mouseup occuring outside of the browser window, It would be wise for Safari devs to comply with other browsers on that point.

[jakeNiemiec]

I can confirm that this is still an issue.

With console.log(e.button), it seems that right-click is correctly being recorded as 2. Left click or not pressing anything seems to always yield 0.

[sarcadass]

I confirm the problem here, in my case I just need to know if the user is left clicking.
Here is a simple workaround:

const buttonPressedCode = event.buttons !== undefined ? event.buttons : event.nativeEvent.which;

On a mouseMove event It should return 0 if the user is not clicking and 1 if left clicking (Safari, Chrome and FF).
But right clicking return 2 on Chrome and FF and 3 on Safari.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[jakeNiemiec]

Not stale, please fix 🙏

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[jakeNiemiec]

Not stale, please fix 🙏🙏

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!