Date picker and today and enter

Atlassian Ecosystem Design
1

When date picker has opened - today is active and it is good behavior. Next when I key press “Enter” calendar closes but value is empty. I must use arrow left and arrow right and key press Enter to select today date.
Is it possible to fix it?

2

Hi @TomaszRegdos, that is unexpected behaviour. If you refer to our docs - Atlaskit by Atlassian you can see that when you press Enter on a date the item is selected. Perhaps this was a bug in an older version which has since been resolved? Are you on the latest version?

3

Hi @MattCharlton,
I am using the latest version of datetime-picekr component.
There is the same problem on examples page.
I click on the first input field, the calendar appears with today active. Next I key down Enter, the calendar is hiding. Input field still empty.
I tested it on Firefox, Chrome and Safari.

4

Ah I see the issue, you need to pass in a defaultValue to DatePicker.

<DatePicker
       defaultValue={new Date().toString()}
       id="datepicker-1"
       onChange={onChange}
 />

DatePicker only updates the value when it changes not when it’s selected.
If the above solution doesn’t work for you please create a bug ticket to track.
https://ecosystem.atlassian.net/servicedesk/customer/portal/24

5

Hi
I use controlled component so i use value properties but set value isn’t for me because filed with date in form is optional but the user must be able to quickly set today’s date using the tab key to focus date field and next use only enter.

I analyze source of datetime-picker and found the reason for this behavior.

When I press enter the value is taken from state.view - Bitbucket but state.view is empty.

When component is created state.view is calculated from props.value or props.defaultValue or today date and for empty value and defaultValue have today date.
https://bitbucket.org/atlassian/design-system-mirror/src/e9dc8c5b63f77a218fb7577735016473dcdbb8ac/design-system/datetime-picker/src/components/DatePicker.tsx#lines-224

Unfortunately after opening the calendar, the event onSelectFocus fires and set state.view from state.value which is empty - DatePicker.tsx#lines-315

When i use left and right arrow the event onCalendarSelect fires and state.view set to selected date and press enter set correct value.

My problem is fixed by remove assignment form state.value to state.view in onSelectFocus.

I think that behavior is a bug and i will create ticket.