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?