Input range fires “input” event on mouseup

RESOLVED FIXED in Firefox 50

Status

()

Product:
Core
Component:
DOM: Events
Type:
defect
Status:
RESOLVED FIXED
Opened:
3 years ago
Updated:
11 months ago

People

(Reporter: vsync.design, Assigned: smaug)

Tracking

Version:
47 Branch
Target:
mozilla50
Points:
---

Firefox Tracking Flags

(firefox47 affected, firefox48 affected, firefox50 fixed)

Details

(
URL
)

Attachments

(4 attachments)

GIF.gif
8.29 KB, image/gif
Details
range_mousemove.diff
4.15 KB, patch
baku
: review+
Details | Diff | Splinter Review
+simpler test
4.05 KB, patch
Details | Diff | Splinter Review
export for checkin
4.36 KB, patch
Details | Diff | Splinter Review
Posted image GIF.gif — 
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160711002726

Steps to reproduce:

Stackoverflow discussion: http://stackoverflow.com/q/38420339/104380
Demo page : http://jsbin.com/galijekovi/edit?html,css,js,output
Firefox Version: 48.0b7
OS: windows 7


Try to click the slider (input range) and then release the mouse


Actual results:

"events fired" count was incremented by "1"


Expected results:

"events fire" should not fire when releasing the mouse, only while dragging (input event)

This causes bugs in sensitive cases where this is not the expected behavior.
URL: http://jsbin.com/galijekovi/edit?html...
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
Problem recreated using FF 47.0
Problem exist also on 48 on Linux.
Status: UNCONFIRMED → NEW
status-firefox47: --- → affected
status-firefox48: --- → affected
Component: Untriaged → DOM: Events
Ever confirmed: true
OS: Windows 7 → All
Product: Firefox → Core
Hardware: x86_64 → All
Version: 48 Branch → 47 Branch
Olli, I feel like I've seen you comment on a range bug recently ...
Flags: needinfo?(bugs)
This is a simple bug fix.
Assignee: nobody → bugs
Flags: needinfo?(bugs)
Attachment #8772618 - Flags: review?(amarchesini)
Comment on attachment 8772618 [details] [diff] [review]
range_mousemove.diff

Review of attachment 8772618 [details] [diff] [review]:
-----------------------------------------------------------------

::: dom/html/test/test_bug1287321.html
@@ +52,5 @@
> +</head>
> +<body>
> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1287321">Mozilla Bug 1287321</a>
> +<p id="display"></p>
> +<div id="content" style="display: none">

remove this <p> and <div> and <pre>
Attachment #8772618 - Flags: review?(amarchesini) → review+
I always keep them since that is what the mochitest generator gives. I always thought mochitest uses them for something, like for reporting results. But maybe not.
Posted patch +simpler test — — Splinter Review
Keywords: checkin-needed
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/fx-team/rev/8f018f9e7725
Don't fire input event on type=range when value hasn't changed. r=baku
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/8f018f9e7725
Status: NEW → RESOLVED
Closed: 3 years ago
status-firefox50: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla50
i tried this scenario in 52 version, still i could see the issue

procedure to reproduce:
-----------------------

<input type="range" id="slice-range" value = 5 max = 100 >


 

<script> 
$(document).ready(function(){
  
  slider = document.getElementById("slice-range");
  
  $("#slice-range").mousedown(function() {
        console.log("when onmousedown" );
        })


  $("#slice-range").mouseup(function() {
        console.log("when onmouseup" );
      slider.value = 25
	    console.log("when onmouseup" ,slider.value );
	  })

	  
	$("#slice-range").keydown(function() {
        console.log("when keydown" );
        })


	$("#slice-range").keyup(function() {
        console.log("when keyup" );
      slider.value = 25
	    console.log("when keyup" ,slider.value );
	  })

 $("#slice-range").on("input", updateTarget.bind());		
  });
  
  
  function updateTarget(){
  
  console.log("printing inputs" , slider.value);
  }
</script>




updatetarget() has been called during the mouseup event is triggered, but updatetarget() is not called during keyup event
(In reply to Carsten Book [:Tomcat] from comment #11)
> https://hg.mozilla.org/mozilla-central/rev/8f018f9e7725


still i see issue, i can reproduce with the following code snipet:



<input type="range" id="slice-range" value = 5 max = 100 >


 

<script> 
$(document).ready(function(){
  
  slider = document.getElementById("slice-range");
  
  $("#slice-range").mousedown(function() {
        console.log("when onmousedown" );
        })


  $("#slice-range").mouseup(function() {
        console.log("when onmouseup" );
      slider.value = 25
	    console.log("when onmouseup" ,slider.value );
	  })

	  
	$("#slice-range").keydown(function() {
        console.log("when keydown" );
        })


	$("#slice-range").keyup(function() {
        console.log("when keyup" );
      slider.value = 25
	    console.log("when keyup" ,slider.value );
	  })

 $("#slice-range").on("input", updateTarget.bind());		
  });
  
  
  function updateTarget(){
  
  console.log("printing inputs" , slider.value);
  }
</script>





in firefox expected to work as keypress event, but mouseup behaves differently. the same scenario i have tested in the chrome but works great
You need to log in before you can comment on or make changes to this bug.