Hi, here's the scenario.
The time picker defaults to 0:00:00 <TimeOnly>:
<TelerikTimePicker ID="txtPlayStart"
@bind-Value="Value.playStart"
Format="H:mm:ss"
T="TimeOnly"
ShowClearButton="true"/>
the user enters a time, saves it, all is well.
He realizes later he entered a bad time and wants to clear it.
He clicks the clear button, and saves it.
Imagine his surprise when nothing changes?
clear doesn't set it back to the default of 0:00:00? there's a visual cue for the user (control is in red), but forcing them to enter 0:00:00 is not really appropriate?
Furthermore, if I catch the OnChange event, it fires when the user clicks the clear button, and it says the time is what it was before the user clicked clear. :/
I'm using the 7.1.0 that just came out yesterday.
I'm coming to realize that many of the Telerik Blazor components are pretty "bare bone" and some some sort of developer wrapper is required to make them user friendly. (Except for "big" ones like the grid.) Is that intentional?
I'm not seeing a way around this short of using the code and building my own custom version that I then have to keep up to date with every new release?
Thanks,
Charles
Charles,
I will address the relevant points separately as follows:
OnChange fired upon clear button click
By design, the OnChange event is supposed to fire as a confirmation of the user action - when the user presses Enter in the input, clicks the Set button in the popup or when the input loses focus. I believe the OnChange event should not fire when the user clicks the clear button and this may be a bug but I will discuss it with the team.
Based on my testing, if there is an initial selected value and I click the clear button, OnChange is not fired. If, however, I select a time from the UI and then clear it - OnChagne is fired. Is this the result you are getting?
Value not cleared upon clear button click
You've mentioned that when the user clicks the clear button on your side nothing changes. However, when testing with the latest version on my end, I am able to clear the value: https://blazorrepl.telerik.com/weFcculK507p9vuR00.
Can you please modify this sample to showcase the exact problematic behavior you are referring to?
Please also list:
Hi, sorry for the delay in responding. I've been very busy and have to prioritize.
Anyhow,
#1 - OnChange event is not useful to me. I expect the variable bound to the control to have the correct value. When the user clicks "save", I expect the bound value to be what the user expects it to be. In the scenario I described above, the user entered a value, then realized it didn't need to be there, and clicks the Clear button. At that point, the bound value is still the original. As a workaround I was looking to see if the OnChange event had some sort of value indicating the value was cleared, but alas, it's still the original value.
#2 - The link you gave me clearly demonstrates the problem. When I create an application with that code, when I enter a time as a user would, the property setter is fired, so the bound value is correctly updated. When I click the clear button, the property setter is not fired, so the bound value is still the original, and now incorrect, value.
As far as I can tell, the user has to manually enter 0:00:00 for the bound value to correctly "clear". The clear button only visually changes the field.
Hi Charles,
Please see my additional comments on the relevant points as follows:
Clearing the value
I'd like to list some details on the component's design in terms of clearing the value as I believe this will help better clarify the situation. Based on the TimePicker's design and our perspective for the component when it is bound to a non-nullable DateTime or TimeOnly, clearing the value is not the same as setting the value to 00:00:00.
From our point of view, these two actions are essentially different. We treat clearing the value as removing/deleting the input value while setting the value to 00:00:00 indicates choosing a valid time that can be done by the user or programmatically. This behavior applies to both pressing the clear button or selecting the whole input and deleting it - in both cases, the input value is removed and the format placeholder is shown.
If we change the current behavior and upon clicking the clear button we reset the value to 00:00:00, the clients that are currently happy with the default behavior will also have a problem. Thus, instead of changing it, we would rather consider an option to cover both desired behaviors.
Invalid value, bound value and events firing
In the discussed scenario, when the value is cleared and the TimePicker shows its placeholder, the bound value indeed remains the old one. The reason for this is that when the value is cleared, the TimePicker is in an invalid state. It expects a valid input/selection and until this is done, the bound value is the last valid value. The UI provides a visual indication to the user that the component is not valid, so they have to select a valid value.
This is why the ValueChanged and the OnChange events cannot fire to give an indication for clearing the value - the cleared input does not have a valid DateTime/TimeOnly that the component can parse and provide through the event arguments.
Desired behavior
If I properly understand, your desired behavior is that when the user clicks the clear button, the TimePicker value is set to 00:00:00. I believe that this can be achieved with some workaround. However, even if you change the clear button behavior, the user can still select the input and press delete in which case you will get the current behavior. Thus, you will end up with two different concepts for clearing the value in one component instance and I am not certain if this is desired.
Instead, can you please consider if the following option could suffice for your desired behavior:
We can potentially expose an event that fires upon each input regardless of whether this input is a valid DateTime/TimeOnly that can be parsed and provides the input value as a string. Currently, the ValueChanged and the OnChange do not fire until the typed value is a valid DateTime/TimeOnly that can be parsed. So, this additional event I'm suggesting can provide you (the developer) with clear indication for each user action - for example, when they clear the value or type something.
Potential downsides of this event could be:
Take your time to consider this information and let me know your thoughts.
Hi, thanks for the detailed response.
I guess we have a difference in opinion. As a user, I'd expect "clear" to "clear", not "put the control in an invalid state". This is not intuitive.
A workaround would be to expose/create an event that would fire when the user clicks clear. I can handle that event and set the bound value to what the user and I would both expect it to be when you click "clear".
Charles
Hi, upon considering this more, perhaps there's a reason behind our differing viewpoints?
If the field is considered optional to the user, or defaulting to 0:00:00 from a programmer's perspective, clicking clear should put it back to the default state for an optional value, or 0:00:00.
If the field is considered required to the user, clicking clear could easily mean what the control currently does: visually clear the control, but put it in an "invalid state" and the bound value remains unchanged.
Perhaps adding a Required boolean parameter with different logic for the Clear button for each option would also address this?
Although your point about the existing customer base is valid, so required would have to default to "True". To me, that's not a good default; controls shouldn't default to being required. It also sets a precedent for other user input controls, which may or may not be a good thing?
I don't know all the Telerik controls well enough to know what all other controls do. However, I do know the "clear" button on a Multiselect does what I think a DateTimePicker should do: it clears the underlying bound value.
Regardless, providing a "user clicked the clear" event would allow more flexibility to developers without changing any existing functionality or setting new precedents.
Regards,
Charles
Hi Charles,
Thank you for sharing your thoughts!
In general, it is not possible that the default behavior covers all potential use cases. That said, instead of changing the default behavior risking some of the customers not to like the new one, we should provide options to customize it, so each developer can achieve their desired result.
Having that in mind, I agree that it will be useful to provide some option for the developer to detect when the user clicked the clear button - this will allow the desired customization. I opened the following feature request on your behalf: Ability to detect when the user clicks the clear button. I also added your vote there and as a creator, you are automatically subscribed to get timely status updates.
For the time being, you can disable the built-in clear button. Instead, add a custom button/span, use CSS to position it inside the picker's input and handle its onclick event: https://blazorrepl.telerik.com/QTabvxPz46eLPVvJ00.
Note we had a similar issue w/ DatePicker. Red box => sets Value to null but the C# code has no idea. There is a fallback option with the date picker, of disabling the input and the user only picks via the calendar popup.
However, we wanted users to be able to type in the input as well and needed to know the date was invalid (not just set the value to null). I wound up writing a wrapper component around a TelerikDatePicker that has a .IsValid() method that checks if the picker has .k-invalid applied (the red box).
Not ideal, I still think the red box should be something more easily accessible to C# code.
Hi Craig,
The DatePicker (and other pickers) share the same behavior as the TimePicker. Thus, the request for detecting when the user clicked the clear button also applies to all pickers.
I am glad that you managed to come up with a workaround for the time being.