feat(module:datepicker): Scroll to selected time in DatePicker/TimePicker

[Alexbits]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[Alexbits]

Hey @ElderJames. I've implemented auto-scroll behavior similar to the one in ant.design. It may need a smoother animation when the selection panel (overlay) is open, but it generally works okay. Please check and let me know what you think.

[codecov]

Codecov Report

Merging #2512 (dcff8bb) into feature (acb6c89) will increase coverage by 1.68%.
The diff coverage is 19.13%.

@@             Coverage Diff             @@
##           feature    #2512      +/-   ##
===========================================
+ Coverage    27.68%   29.37%   +1.68%     
===========================================
  Files          498      535      +37     
  Lines        33526    25948    -7578     
  Branches         0      260     +260     
===========================================
- Hits          9283     7621    -1662     
+ Misses       24243    18287    -5956     
- Partials         0       40      +40     

Impacted Files	Coverage Δ
components/calendar/Calendar.razor.cs	0.00% <0.00%> (ø)
...s/core/JsInterop/modules/dom/manipulationHelper.ts	13.69% <0.00%> (ø)
components/date-picker/RangePicker.razor.cs	0.00% <0.00%> (ø)
...date-picker/internal/DatePickerDatetimePanel.razor	0.00% <0.00%> (ø)
...e-picker/internal/DatePickerDatetimePanel.razor.cs	0.00% <0.00%> (ø)
...s/date-picker/internal/DatePickerTemplate.razor.cs	31.81% <0.00%> (+2.47%)	⬆️
components/date-picker/internal/DatePickerBase.cs	46.88% <20.00%> (+1.21%)	⬆️
components/core/JsInterop/JSInteropConstants.cs	28.33% <33.33%> (-0.49%)	⬇️
components/date-picker/locale/FormatAnalyzer.cs	90.59% <53.57%> (-7.33%)	⬇️
components/date-picker/DatePicker.Razor.cs	68.96% <100.00%> (+0.89%)	⬆️
... and 450 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update acb6c89...dcff8bb. Read the comment docs.

[ElderJames]

Well done! You can refer to BackTop component that it scroll more smoothly.

And I find that it wouldn't scroll when I modify the time value directly:

[Alexbits]

Well done! You can refer to BackTop component that it scroll more smoothly.

And I find that it wouldn't scroll when I modify the time value directly:

There are other issues with manual input.

• DatePicker.Razor.cs.OnBlur resets the value to the cached if Enter key is not pressed, the Ok button does nothing.
• The time string with AM/PM is not parsed by FormatAnalyzer.TryPickerStringConvert and the value is not changed as result.

[Alexbits]

• DatePicker.Razor.cs.OnBlur resets the value to the cached if Enter key is not pressed, the Ok button does nothing./

I've tried changing it to accept parsed value immediately 9211cf8, but in this case, a unit test fails. So what behavior do we want here? Should it apply the value of manual input with Enter key and Ok button only? But in this case, why is the input from the panel confirmed immediately? 🤔 In the ant.design the input is applied only after Enter key or Ok button.

[ElderJames]

I've tried changing it to accept parsed value immediately 9211cf8, but in this case, a unit test fails. So what behavior do we want here? Should it apply the value of manual input with Enter key and Ok button only? But in this case, why is the input from the panel confirmed immediately? 🤔 In the ant.design the input is applied only after Enter key or Ok button.

Maybe we can follow the behavior of ant.design

[ElderJames]

LGTM. Thanks!