Commit 4f6e8a25 authored by Stone Shih's avatar Stone Shih
Browse files

Bug 1286509 - Range input does not fire ‘change’ event when the range is... 

Bug 1286509 - Range input does not fire ‘change’ event when the range is changed using the keyboard. r=smaug
parent 4efade90

dom/html/HTMLInputElement.cpp

+25 −13
Original line number Diff line number Diff line
@@ -3762,13 +3762,14 @@ HTMLInputElement::PreHandleEvent(EventChainPreVisitor& aVisitor) 
        // that).

        frame->InvalidateFrame();

      }

    } else if (aVisitor.mEvent->mMessage == eKeyUp) {

    }

  }



  if (aVisitor.mEvent->mMessage == eKeyUp && aVisitor.mEvent->IsTrusted()) {

    WidgetKeyboardEvent* keyEvent = aVisitor.mEvent->AsKeyboardEvent();

      if ((keyEvent->mKeyCode == NS_VK_UP ||

           keyEvent->mKeyCode == NS_VK_DOWN) &&

          !(keyEvent->IsShift() || keyEvent->IsControl() ||

            keyEvent->IsAlt() || keyEvent->IsMeta() ||

            keyEvent->IsAltGraph() || keyEvent->IsFn() ||

    if (MayFireChangeOnKeyUp(keyEvent->mKeyCode) &&

        !(keyEvent->IsShift() || keyEvent->IsControl() || keyEvent->IsAlt() ||

          keyEvent->IsMeta() || keyEvent->IsAltGraph() || keyEvent->IsFn() ||

          keyEvent->IsOS())) {

      // The up/down arrow key events fire 'change' events when released

      // so that at the end of a series of up/down arrow key repeat events
@@ -3776,7 +3777,6 @@ HTMLInputElement::PreHandleEvent(EventChainPreVisitor& aVisitor) 
      FireChangeEventIfNeeded();

    }

  }

  }



  nsresult rv = nsGenericHTMLFormElementWithState::PreHandleEvent(aVisitor);
@@ -8144,6 +8144,18 @@ HTMLInputElement::GetWebkitEntries(nsTArray<RefPtr<Entry>>& aSequence) 
  aSequence.AppendElements(mEntries);

}



bool HTMLInputElement::MayFireChangeOnKeyUp(uint32_t aKeyCode) const

{

  switch (mType) {

    case NS_FORM_INPUT_NUMBER:

      return aKeyCode == NS_VK_UP || aKeyCode == NS_VK_DOWN;

    case NS_FORM_INPUT_RANGE:

      return aKeyCode == NS_VK_UP || aKeyCode == NS_VK_DOWN ||

             aKeyCode == NS_VK_LEFT || aKeyCode == NS_VK_RIGHT;

  }

  return false;

}



} // namespace dom

} // namespace mozilla

dom/html/HTMLInputElement.h

+6 −0
Original line number Diff line number Diff line
@@ -1494,6 +1494,12 @@ private: 
           aType == NS_FORM_INPUT_NUMBER;

  }



  /**

   * Returns true if the key code may induce the input's value changed to fire

   * a "change" event accordingly.

   */

  bool MayFireChangeOnKeyUp(uint32_t aKeyCode) const;



  struct nsFilePickerFilter {

    nsFilePickerFilter()

      : mFilterMask(0) {}

dom/html/test/forms/mochitest.ini

+2 −0
Original line number Diff line number Diff line
@@ -5,6 +5,8 @@ support-files = 
  !/dom/html/test/reflect.js



[test_bug1039548.html]

[test_bug1286509.html]

skip-if = os == "android" || appname == "b2g" # up/down arrow keys not supported on android/b2g

[test_button_attributes_reflection.html]

[test_input_radio_radiogroup.html]

[test_input_radio_required.html]

dom/html/test/forms/test_bug1286509.html

0 → 100644
+49 −0
Original line number Diff line number Diff line 
<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=1286509

-->

<head>

  <meta charset="utf-8">

  <title>Test for Bug 1286509</title>

  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

</head>

<body>

<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1286509">Mozilla Bug 1286509</a>

<p id="display"></p>

<div id="content">

  <input type="range" id="test_input" min="0" max="10" value="5">

</div>

<pre id="test">

  <script type="application/javascript">

  /** Test for Bug 1286509 **/

  SimpleTest.waitForExplicitFinish();

  var expectedEventSequence = ['keydown', 'change', 'keyup'];

  var eventCounts = {};

  var expectedEventIdx = 0;



  function test() {

    var range = document.getElementById("test_input");

    range.focus();

    expectedEventSequence.forEach((eventName) => {

      eventCounts[eventName] = 0;

      range.addEventListener(eventName, (e) => {

        ++eventCounts[eventName];

        is(expectedEventSequence[expectedEventIdx], e.type, "Events sequence should be keydown, change, keyup");

        expectedEventIdx = (expectedEventIdx + 1) % 3;

      }, false);

    });

    synthesizeKey("VK_UP", {});

    synthesizeKey("VK_DOWN", {});

    synthesizeKey("VK_LEFT", {});

    synthesizeKey("VK_RIGHT", {});

    is(eventCounts['change'], 4, "Expect key up/down/left/right should trigger range input to fire change events");

    SimpleTest.finish();

  }

  addLoadEvent(test);

  </script>

</pre>

</body>

</html>