Bug 1371111 - Open picker when input element's padding area is clicked. r=mconley
authorJessica Jong <jjong@mozilla.com>
Thu, 17 Aug 2017 20:33:00 -0400
changeset 376200 fecc3b17395a7265fc7ecfe638590b6211de6335
parent 376199 9e64af6b5158774cf588a4b194e3efc58c3fb5c9
child 376201 2d214c46769ab1f28f251a621164c10d647df8e8
push id32376
push userkwierso@gmail.com
push dateWed, 23 Aug 2017 00:07:40 +0000
treeherdermozilla-central@64a45ee1731c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1371111
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1371111 - Open picker when input element's padding area is clicked. r=mconley Currently, we listen to click events on the xbl binding; but actually we should listen to click events on the input element itself, so that we get called when the padding area is clicked. MozReview-Commit-ID: 8NQKrxSXUyL
toolkit/content/widgets/datetimebox.xml
--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -1230,16 +1230,20 @@
         this.EVENTS.forEach((eventName) => {
           this.addEventListener(eventName, this, { mozSystemGroup: true });
         });
         // Handle keypress separately since we need to catch it on capturing.
         this.addEventListener("keypress", this, {
           capture: true,
           mozSystemGroup: true
         });
+        // This is to open the picker when input element is clicked (this
+        // includes padding area).
+        this.mInputElement.addEventListener("click", this,
+                                            { mozSystemGroup: true });
         // This is to close the picker when input element blurs.
         this.mInputElement.addEventListener("blur", this,
                                             { mozSystemGroup: true });
       ]]>
       </constructor>
 
       <destructor>
       <![CDATA[
@@ -1247,23 +1251,27 @@
 
         this.EVENTS.forEach((eventName) => {
           this.removeEventListener(eventName, this, { mozSystemGroup: true });
         });
         this.removeEventListener("keypress", this, {
           capture: true,
           mozSystemGroup: true
         });
+        this.mInputElement.removeEventListener("click", this,
+                                               { mozSystemGroup: true });
+        this.mInputElement.removeEventListener("blur", this,
+                                               { mozSystemGroup: true });
       ]]>
       </destructor>
 
       <property name="EVENTS" readonly="true">
         <getter>
         <![CDATA[
-          return ["click", "focus", "blur", "copy", "cut", "paste", "mousedown"];
+          return ["focus", "blur", "copy", "cut", "paste", "mousedown"];
         ]]>
         </getter>
       </property>
 
       <method name="log">
         <parameter name="aMsg"/>
         <body>
         <![CDATA[
@@ -1794,22 +1802,19 @@
         ]]>
         </body>
       </method>
 
       <method name="onClick">
         <parameter name="aEvent"/>
         <body>
         <![CDATA[
-          this.log("onClick originalTarget: " + aEvent.originalTarget);
+          this.log("onClick originalTarget: " + aEvent.originalTarget +
+                   " target: " + aEvent.target);
 
-          // XXX: .originalTarget is not expected.
-          // When clicking on one of the inner text boxes, the .originalTarget is
-          // a HTMLDivElement and when clicking on the reset button, it's a
-          // HTMLButtonElement.
           if (aEvent.defaultPrevented || this.isDisabled() || this.isReadonly()) {
             return;
           }
 
           if (aEvent.originalTarget == this.mResetButton) {
             this.clearInputFields(false);
           } else if (!this.mIsPickerOpen) {
             this.mInputElement.openDateTimePicker(this.getCurrentValue());