Value of the text field does not get updated in Firefox v25.0.1

[GotHima]

Hi there. I'm having an issue which only occurs in my Firefox browser version 25.0.1 (latest version at this time of writing). I've tried other browsers but could not reproduce the same issue elsewhere, including: Chrome, IE, Safari, and Opera. The calendar does pop up in the Firefox browser, and when I select a day, the calendar closes but the text field is not updated with the selected date. Even weirder than that is, after I have tried many times again and again, sometimes the text field was updated one or two times.

I'm using jQuery Mobile in my project but the issue could not be replicated in other browsers than Firefox. And the jQuery version I'm using is 1.10.2. Here's my code to initialize the control:
var today = new Date();
$("#signupBirthday").pickadate({
today: "",
format: "dddd, dd mmm, yyyy",
hiddenPrefix: "mask_",=
formatSubmit: "yyyy-mm-dd",
selectYears: 80,
selectMonths: true,
max: [today.getUTCFullYear()-18,today.getUTCMonth(),today.getUTCDate()]
});

Please help. Thanks in advance.

[davemiller]

Happens to me on FF 25.0.1 on OSX with jquery 1.8
with error "TypeError: Argument 1 of Node.compareDocumentPosition is not an object." coming from jquery's contains method

to get it working I changed picker.js from:

 // If it’s disabled or nothing inside is actively focused, re-focus the element.
                        if ( targetDisabled || !$.contains( P.$root[0], activeElement ) ) {
                            ELEMENT.focus()
                        }

to

 // If it’s disabled or nothing inside is actively focused, re-focus the element.
                        if ( targetDisabled || activeElement==undefined || !$.contains( P.$root[0], activeElement ) ) {
                            ELEMENT.focus()
                        }

and it worked

[GotHima]

Thanks for the suggestion. I have tried your approach but the same issue persists. The funny thing is, on the pickadate website it works perfectly fine in my FF25.0.1. But it just wouldn't work on my website. So I wonder whether there is any conflict with other js libraries that causes issue only in FF (as I mentioned, my webpage works fine in Chrome, IE, Safari & Opera). I forgot to mention that I'm also using jQuery Mobile 1.3.2. I'm totally lost here as I don't see any error in the Firebug.

[GotHima]

I just found something that might leave a clue to what's happening. As I described my problem situation in my original post, the issue happens when I click the input field, the calendar pops up, and I click to select any day in the calendar, the calendar closes but the input field isn't updated (except in some rare occasions it does). What I just found out was, after I click to open the calendar to select a day, instead of using the mouse pointer to pick a day, I use keyboard arrow keys to select the day, and it works. The field gets updated each and every time when I do so. So I was wondering whether it has anything to do with mouse events?

[githubsuser]

Have you tried removing jQuery Mobile components and tried the same? Do a standalone page with a text field combined with this plugin, use jQuery Mobile with it, you will have the problem, remove JQM and try again, you will not have any problem, I am having the same issue.

[GotHima]

Finally I've found out what is the cause of problem. It's not because of any of the JavaScript libraries which I have included in my project. It's the CSS property "user-select" which I have applied document-wide to prevent user from highlighting and selecting any texts except for input fields on my webpage. I had to remove the property prefixed for Firefox in order for it to work normally in Firefox (while keeping the prefixes for other browsers)

:not(input) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
/-moz-user-select: none;*/
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

[githubsuser]

I haven't included any of these properties, I did a standalone page, still have problem in Safari browser, and funny thing is it selects date while using keyboard alone and problem is only when I include JQM libraries, like you say may be some problem with mouse event?

[amsul]

No longer an issue with v3.3.1 :)

Cheers!

[GotHima]

Hi there amsul! I just downloaded v3.3.1 and tested with my FF. I managed to pick any day of the current month and the text field was updated successfully. However, there's another issue now. I couldn't change the values of both the month and year select fields. Could you please look into it again? Thanks!

[hudsonperalta]

I'm still having an issue in FireFox w/ v3.3.2 and jQuery 1.7.2

The calendar opens but when I try to click on a day it instantly closes and not date is selected.

[hudsonperalta]

By commenting out lines 153 through 155 it works again. Of course if I ever use this on a disabled field it would again not function the same.