WhatSock / apex

Apex 4X: The Comprehensive ARIA Development Suite
MIT License
29 stars 9 forks source link

Issue with Enter key opening first datepicker #59

Open lukos opened 3 weeks ago

lukos commented 3 weeks ago

Whether I have 1 or more date pickers on a page, if I press the enter key in any input box, including those that are not date pickers, it always opens the first date picker. If I press enter in the last date picker input field, it also opens the first date picker. On your examples, it doesn't do that so I'm not sure how I've broken it.

I use the following to attach the date picker to each date box input:

$(function () {
    $('input.datebox').each(function (index, elem) {
        $A.setDatepicker({
            toggle: $(this).siblings(".date-calendar")[0],
            input: this,
            inputDateFormat: $(this).attr('placeholder')
        });
    });
});

This does work correctly in terms of wiring the buttons up, which do open the correct date picker and entering a date on the date picker control does put the result into the correct text box, it is just the enter key.

I found the rootListener in 4X.js line 6699 and it seems to intercept the enter key with the opendatepicker event, which presumably just finds the first date picker and opens it. I can see the event being triggered explicitly in Datepicker.js but I don't really understand what each of these is for.

Is this something I haven't configured correctly because it seems weird?

Thanks

accdc commented 3 weeks ago

I'm having trouble diagnosing this remotely. Can you do me a favor and also include the HTML markup for the inputs and buttons that you are attaching the datepicker to?

Once I have that I'll run the code on it and see what's going on with the event attachment.

accdc commented 2 weeks ago

Basic2.zip

I created a quick example that shows how to loop through multiple datepickers on the same page, which is attached.

I recently updated the datepicker module, so downloading a new copy of the repo may be good for running this example.

Simply extract the attached zip in the folder Templates/Datepickers

Then use the WebserverRun.sh script in the root to start the webserver and then open the new test page at:

http://localhost/Templates/Datepickers/Basic2/index.htm

I wasn't able to reproduce the bug you mentioned, but if you notice the same thing on this example too please let me know and I'll look into it further.

lukos commented 2 weeks ago

Thanks. It is still happening but since I am currently running on a firewalled dev environment, I will need to get something into a public website so I can show you what is happening.

lukos commented 2 days ago

Hi @accdc sorry for the delay. If you click https://surveys-core.smartsurvey.co.uk/s/FHY5CH you will get a test survey using a new rendering engine and your date picker. This demonstrates the issue. The calendar buttons work fine to open the correct date picker instance but pressing enter in any of the text boxes always displays the first date picker.

The javascript is basically this:

$(function () {
    $A.query('input.datebox', function (i, elem) {
        $A.setDatepicker({
            toggle: $(elem).siblings(".date-calendar")[0],
            input: elem,
            inputDateFormat: $(elem).attr('placeholder')
        });
    });
});

Thanks