DatePicker hide() in preClose event handler

Karl53

Editor v1.4.2

I'm using Bootstrap Datepicker plugin

I have a minor issue with autoclose not working when the editor closes.

The editor is initialized this way:

{
    "name": "date2",
    "type": "date",
    "opts": {autoclose: true},
    "id": "date2"
},

Autoclose works fine if the user clicks on a date. The problem is, if the user moves about the table with the tab or cursor keys and they arrive at a date field, the calendar opens. If they continue tabbing and navigate away from the cell, the calendar remains open.

I tried this approach, but to no avail:

    .on('preClose', function () {
        editor.field('date2').hide();
    })

I also tried the above call in the close event handler, but apparently the calendar opens before the editor and what gets closed is the calendar on the cell that is about to receive the focus.

Does anyone have any thoughts on how to get the calendar to close when the user navigates away from a date cell? There is no issue if the user clicks in a different cell. The calendar closes just fine.

TIA.

allan

Hi Karl,

Interestingly I've just tried this and it appears to work as expected for me - I've not been able to keep the calendar open after selecting a date. Are you able to give me a link to your page so I can debug it?

Thanks,
Allan

Karl53

Correct, the calendar closes as expected after selecting a date.

The issue is when a user navigates about the table using a tab key or cursor keys. When arriving on a date field, the calendar opens, which seems appropriate. However, if the user continues to hit tab, which moves focus off the field, the calendar remains open. This means cells in the table can be covered.

I tried to force the calendar closed with a call to hide() in the preClose event (see original post for code and more details), but the code as posted, did not close the calendar.

Most likely this can be duplicated in the Tab between columns example if the date field were changed to use this plugin.

If needed, I can put together an example, but I don't have anything posted on a public site yet.

allan

Hi,

Thanks for your e-mail. I've just replied but for anyone else who finds this thread, we can add:

        this.on( 'close', function () {
            conf._input.datepicker('hide');
        } );

to the Bootstrap Date plug-in fro Editor to resolve this. That will be included in the next release.

Allan