Closed Bug 1287321 Opened 9 years ago Closed 9 years ago

Input range fires “input” event on mouseup

Categories

(Core :: DOM: Events, defect)

47 Branch
defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla50
Tracking Status
firefox47 --- affected
firefox48 --- affected
firefox50 --- fixed

People

(Reporter: vsync.design, Assigned: smaug)

References

()

Details

Attachments

(4 files)

Attached 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.
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
Problem recreated using FF 47.0
Problem exist also on 48 on Linux.
Status: UNCONFIRMED → NEW
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.
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
Status: NEW → RESOLVED
Closed: 9 years ago
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.

Attachment

General

Creator:
Created:
Updated:
Size: