Internal issue 2972 - Numerous weirdnesses with IcDatePicker

[ticket-sync]

We’ve been testing the {{@ukic/canary-react}} {{2.0.0-canary.32}} version of {{IcDatePicker}} and have observed a number of issues or strange behaviours in this component.

When editing the field after a valid value has been set, an unexpected {{icChange}} event is fired when the user begins to edit the YYYY segment. This event has {{e.details.value}} set to {{null}} and can therefore cause the field to be blanked when the state is controlled externally.

This, expectedly, does not seem to be fired for when editing the month or day segments.

When {{min}} or {{max}} are set on the component (probably also {{disablePast}} / {{disableFuture}}), if a value outside of this range is typed in, no {{icChange}} event is fired. This prevents us from being able to validate the value ourselves and update our custom {{validationMessage}}.

Additionally, after an invalid value is entered into the field, tabbing onto or clicking the “Display calendar” button clears the entered value.

When using the picker dialog (which appears above the field, anchored at the bottom) to tab between months/years, the length of the month (in weeks) can cause the position of the “<“ and ”>” buttons to move.

This seems to be fixed in the version of the date picker used in the current ICDS website, where the dialog appears underneath the field, anchored at the top - although the position of the “Clear” and “Go to today” buttons can move instead.
Relatedly, if the field is near the top of the screen, the picker dialog will open mostly out-of-view (this also seems to be fixed in the version on the site).

[ad9242]

second issue may be linked to #3025