fix: when dragging a fader mouseUp could trigger other buttons.

olzzon · Apr 2, 2020 · 145423e · 145423e
1 parent d976aa3
commit 145423e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/client/assets/css/Channel.css b/client/assets/css/Channel.css
@@ -6,6 +6,7 @@
     width: 86px;
     height: 950px;
     position: relative;
+    touch-action : none;
 }
 
 .channel-body.ignore-on {

diff --git a/client/components/Channel.tsx b/client/components/Channel.tsx
@@ -128,7 +128,8 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                     'on': this.props.fader.pgmOn,
                     'mute': this.props.fader.muteOn
                 })}
-                onMouseUp={event => {
+                onClick={event => {
+                    event.preventDefault()
                     this.handlePgm();
                 }}
                 onTouchEnd={event => {
@@ -150,14 +151,14 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                     'on': this.props.fader.voOn,
                     'mute': this.props.fader.muteOn,
                 })}
-                onMouseUp={event => {
-                    this.handleVo();
+                onClick={event => {
+                    event.preventDefault()
+                    this.handleVo()
                 }}
                 onTouchEnd={event => {
                     event.preventDefault()
                     this.handleVo()
                 }}
-
             >
                 VO
             </button>
@@ -223,7 +224,8 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                 className={ClassNames("channel-ignore-button", {
                     'on': this.props.fader.ignoreAutomation
                 })}
-                onMouseUp={event => {
+                onClick={event => {
+                    event.preventDefault()
                     this.handleIgnore();
                 }}
                 onTouchEnd={event => {
@@ -242,7 +244,8 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                 className={ClassNames("channel-mute-button", {
                     'on': this.props.fader.muteOn
                 })}
-                onMouseUp={event => {
+                onClick={event => {
+                    event.preventDefault()
                     this.handleMute();
                 }}
                 onTouchEnd={event => {