Keyboard keys not working to select a date on an sp-date-picker on an sp-modal dialog

[NathanC1]

I am required to configure an sp-date-picker on an sp-modal dialog to work with only the keyboard.

I am using the sp-date-picker in two places; one on a portal page form and the other in an sp-modal dialog.  In both places, the calendar element works as expected with the mouse.  However, the pop-out calendar date selection is supposed to also work with the keyboard, using the arrow keys to move around the dates on the pop-out calendar and selecting a date with the Enter key. 

In the regular portal page form, the keyboard keys work as expected, successfully selecting a date and entering it in the date field, but they do not work in the sp-modal dialog.  In the sp-modal-dialog, the keyboard tab key works to tab through the other fields on the dialog to get to the date field and over to the little calendar icon, then pressing the space bar opens opens the pop-out calendar (as expected), however, once the calendar pops out, no keys work to select a date from the calendar. 

I discovered the issue is the pop-out calendar is not getting the focus.  If I use the mouse to click on one of the calendar dates, then the arrow keys work to move around the calendar and select a date, as expected.
How can I make the pop-out calendar draw focus when using sp-date-picker on an sp-modal dialog?

The date picker code is the same on both the regular portal page and the modal dialog:

<sp-date-picker

    ng-init="getDefaultVal()"

    id="date-picker"

    field="c.datePicker"

    ng-model="c.datePicker.value"

    sn-include-time="false"

    ng-change="c.getValues('datePicker')"

    aria-required="true"

    aria-invalid="false"

    required="required">

</sp-date-picker>

Is there an issue with the pop-out calendar of a date field drawing focus on an sp-modal dialog?

[Chandrashekar6]

We are having the same issue. Were you able to solve this?

[NathanC1]

Yes and no.  I ended up bailing on the SN html <sp-date-picker > element and went with pure HTML <input type="date">. 

(mind you, this is not for the platform backend forms, it's only for portal widgets and, I suppose, any manually configured UI page)

It worked a thousand times better.   For one, the SN <sp-date-picker > is just a string field with a graphic calendar.  You have to do all the validation yourself.  The user can literally type anything in that string field.  I really don't understand why SN would create an element called a "date picker" and not include a date validation mask.  Seems to contradict the whole concept of "low code".   Anyway, here are some of the advantages of using pure HTML after literally just entering <input type="date">:

• Has automatic placeholder text.
• Has built-in validation.  It's impossible to enter an invalid date (or at least it has an automatic error message).
• Automatically displays date format based on browser and computer settings.
• FULLY keyboard controllable, even in the graphic calendar.
• Works PERFECTLY with screen reader.  It even reads the error messages.

Here's a screen shot of the html from jsbin.com (an awesome free tool I use all the time to test stuff like this).  Jsbin.com automatically puts in all the html code.  I literally just entered the <input type="date">.

Here's the output:

I experienced virtually no downside.  The only limitation might be that it's an HTML 5 feature, but I believe most modern browsers are up to that standard by now.

I hope this is helpful to you.  I don't imagine this answer going to get the coveted SN "Accepted Solution" green checkmark.  Sorry SN.  Good luck.