Disable context menu in timepicker's up & down arrow

Simon Egersand

2017-11-05 a8de69dc3f576257a27144c253601008e03eed2b

Disable context menu in timepicker's up & down arrow

Right now, right clicking on up or down arrow starts the counter
while also showing the default context menu for browsers. This
commit disables the context menu & makes the right click
behavior identical to left click.

 src/TimeView.js

@@ -57,9 +57,9 @@
                }
            }
            return React.createElement('div', { key: type, className: 'rdtCounter' }, [
                React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
                React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ), onContextMenu: this.disableContextMenu }, '▲' ),
                React.createElement('div', { key: 'c', className: 'rdtCount' }, value ),
                React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
                React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), onContextMenu: this.disableContextMenu }, '▼' )
            ]);
        }
        return '';
@@ -67,9 +67,9 @@

    renderDayPart: function() {
        return React.createElement('div', { key: 'dayPart', className: 'rdtCounter' }, [
            React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
            React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▲' ),
            React.createElement('div', { key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),
            React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )
            React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▼' )
        ]);
    },

@@ -185,6 +185,11 @@
        };
    },

    disableContextMenu: function( event ) {
        event.preventDefault();
        return false;
    },

    padValues: {
        hours: 1,
        minutes: 2,

 test/__snapshots__/snapshots.spec.js.snap

@@ -22,6 +22,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -31,6 +32,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>
@@ -43,6 +45,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -52,6 +55,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>
@@ -60,6 +64,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -69,6 +74,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>
@@ -7599,6 +7605,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -7608,6 +7615,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>
@@ -7620,6 +7628,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -7629,6 +7638,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>
@@ -7637,6 +7647,7 @@
                  className="rdtCounter">
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▲
                  </span>
@@ -7646,6 +7657,7 @@
                  </div>
                  <span
                    className="rdtBtn"
                    onContextMenu={[Function]}
                    onMouseDown={[Function]}>
                    ▼
                  </span>