[datetime2] fix(DateRangeInput2): input value when controlled

[tzyl]

Fixes #5791

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

DateRangeInput2 input focus handler should read from the controlled value rather than the state value.

When a new date is selected the onChange callback is called which updates the controlled value. On the next render cycle componentDidUpdate syncs the state value with the controlled props value and also refocuses the boundary input at the same time. During this input focus the stale value from the state is read before it has been updated leading to the input display value showing the previous value.

Reviewers should focus on:

The input blur and input change handlers already special case controlled mode could it have been intentional to have this behaviour in the input focus handler for any reason?

Screenshot

I tested this on the docs app locally by changing the example to be controlled:

@@ -120,6 +120,7 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
                     {...spreadProps}
                     {...format}
                     onChange={this.handleRangeChange}
+                    value={range}
                     footerElement={showFooterElement ? exampleFooterElement : undefined}
                     timePickerProps={
                         enableTimePicker

Before	After

[adidahiya]

@tzyl it was a bit tricky to add a unit test which failed with the existing behavior... but I've added one that may catch regressions in this behavior in the future.

[blueprint-bot]

Add unit test

Previews: documentation | landing | table | demo