Kendo React DatePicker with clearButton should reset to initial placeholder + floating label state

[Sanja Tolo]

Hi Kendo React team,

I’m using the Kendo React DatePicker with dateInput and clearButton={true}.

Here’s the behavior I’m seeing:

• Initial state: The input shows the floating label (Date Start) and the placeholder (dd.MM.yyyy.).

• When a value is selected: The date is shown correctly in the input.

• After pressing the clear button: The input shows only the placeholder (dd.MM.yyyy.), but the floating label does not reset to the initial state.

What I would like instead is that when the clear button is clicked, datePicker should return to the exact same initial state.

I’ve attached a screenshot showing the three states (initial, selected, and after clear) for clarity.

Version is: @progress/kendo-react-dateinputs: "9.3.1"

Thanks!

[Filip]

Hello, Sanja,

I tested the following example with uses the DatePicker and a custom Input with the clearButton rendered, however I was not able to reproduce the undesired behavior:

https://stackblitz.com/edit/react-2usmg4cc?file=app%2Fapp.tsx

Can you please verify that this is the correct setup? In case you are able to reproduce the problem in the example above as well, can you please provide the steps so that I can test again?

Regards,
Filip

[Sanja Tolo]

Hello, 

I forgot to mention that we are using as most of the users are in complex cases a controlled component (either in filters or in form):

Controlled Date Input StackBlitz

[Filip]

Hello, Sanja,

Thank you for the provided example. I tested it again, however I am still not able to reproduce the described behavior. If possible can you please provide the used steps so that I can try again?

Regards,
Filip

[Sanja Tolo]

Hello Filip,

I have provided a stackblitz example. Clear button does nothing in controlled state because onChange event.value is not null or undefined but date that is already inside. So in controlled component clearButton does not work at all? And if it works, I want it to go to initial state, so upon clicking clearButton the datePicker should clear, floating label goes inside input like in initial state and datePicker blurs.

Please, read the question that was first asked, see the image provided and if you need any more clarification let me know.

Regards.

[Filip]

Hi, Sanja,

Thank you for the provided clarification, and please accept my apologies for the oversight earlier.

The clear button does not indeed work and the label does not go inside the input in the previous example. After further debugging it seems that the clearButton logic affects the DateInput, but not the DatePicker since it does not expose a `clearButton` prop. I was able to resolve the clear button issue and make it work by handling the logic inside the custom DateInput:

• https://stackblitz.com/edit/react-2usmg4cc-kxjggeqt?file=app%2FcustomDateInput.tsx

However I was not able to find a suitable solution for the floating label in this case. We will have to investigate further if this is an issue with the component itself and if a suitable workaround exists for this scenario.

Regards,
Filip