How can I extend FluentDatePicker to support double-click event on its text field?

[RickyLin]

I started to study Blazor and Fluent UI Blazor recently, it's very exciting. I'd like to know how to extend an existing Fluent UI Blazor components.

Taking FluentDatePicker as an example, it doesn't seem to support double-click event on its text field. I want to add a new behavior to FluentDatePicker: Double-clicking the text field of the FluentDatePicker can fill out today's date immediately. How can I implement that? Do I have to extend the functionality on the FluentDatePicker itself, like cloning the whole fluentui-blazor repository or can simply create a new class in my project that inherits the FluentDatePicker class then extend the functionality?

Thanks.

[vnbaaij]

Either approach works. But I think it could be a useful addition to our component so I rather have you create a PR with which we can integrate this into the library for everyone.

[RickyLin]

Hi @vnbaaij,
That's what I'm going to do with the FluentDatePicker,

1. Add OnDoubleClick event.
2. Add a property/parameter DoubleClickToToday which is of type bool and defaults to false. It determines whether the Today value should be set when a user double-clicks on the text field.
   2.1 Q: Is there a better name than DoubleClickToToday?
3. I found out currently there's an overlay over the text field which is used to close the calendar when a user clicks outside of the date picker. This leads to two issues:
   3.1 It's difficult to trigger double-click event on the text field because one click is taken by the overlay?
   3.2 It makes switching to other components by mouse click not smoothly. I click on date picker and calendar shows, then I click another component but the focus doesn't switch to that component because the click is taken by the overlay to close the calendar.
   3.3 I tried solving this issue by removing the overlay and leveraging the JavaScript mousedown event on document element to close calendar when clicking on outside of the date picker.

Regarding 3.2, This is how it looks like currently:

This is how it looks like after the improvement:

I'm still trying to figure out how to write tests, will send a PR when I'm ready.

Thanks.

[dvoituron]

I don't really understand the suggestion: why would you want to double-click on the textfield to select the current date? I don't understand how the user is going to know that they have to do this to display the current date. Why not add a ‘Today’ button to the date selection panel?

That's the choice provided by FluentUI and React, for example.
https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs

[RickyLin]

Hi @dvoituron,
It starts with the habit of our system users, they enter forms with a vast number of fields every day, the "double-click to today" feature saves their time.
As an extensively used library, It may not be hurt to have one more optional feature to satisfy people who want it even if there's only a few of people.
The Today button is another choice, and they can exist side by side although it would not be our users' choice to click once to show calendar then move mouse to the Today button and click again other than just double-clicking the text field.

Thanks.

[RickyLin]

If it's a public website, users may don't know double-click-to-today exists unless they occasionally do so. But it's another story for a system that UI operation efficiency is critical, users want to save clicks and they have to read system manual or get experience from expert users.

[dvoituron]

I understand the advantage better, but it's still specific to certain very specific situations.
In this case, I think the property should be DoubleClickToDate which allows you to specify a very specific date or the current date DateTime.Today. This could help resolve other cases.

[RickyLin]

It makes sense. I updated PR, now it's DoubleClickToDate