limel-date-picker: date pickers with require attribute should not be clearable

[adbc-lime]

New feature motivation

I would like to make it clear for the user that date picker is not clearable and avoid checking for null values in the code.

New feature description

Date picker with required property should not be clearable.

• "clear symbol" icon should disappear when attribute "required" is added to the input.

Without required

Required

• Date should not be changed or cleared when user hits backspace or uses "clear" on native web android/ios date picker.

New feature implementation

I could even try and create a PR if you greenlight the idea.

[adbc-lime]

At the same time usually native elements do not change their look or behavior with extra required attribute so if you reject that idea it's totally understandable.

[Kiarokh]

You have a good point there! But I am not sure if the proposed solution of hiding/removing the clear button is the right approach. It could be, but I'd need to think a bit more, or be convinced 😊

I think what's missing is the fact that the required but empty field does not become invalid; unlike other input components like limel-select. In the Select component, the initial value can be empty, but then if the user interacts with the dropdown but does not select an option, then the component will automatically run an inbuilt validity check. Relevant code added here: 04af5d9

Screen.Recording.2025-08-18.at.15.38.53.mov

This in turn can block a form, which is supposed to be submitted or saved.

Would adding an internal validity check help if your case?

[adbc-lime]

If we want to follow web standards as closely as possible then my proposal doesn't fit.
The native way suggests that inputs should always be clearable and validation should kick in when the form is being submitted.

Having an invalid state is a nice touch but does not solve the issue we had.

DatePickerFix.mp4

I would like to have date picker that is not clearable.

Right now I am reacting to an "change" event and setting the date picker value again to prevent it from being cleared but for a split second until user blurs the input it appears as it is still empty.

[Kiarokh]

I can see your point. The only thing is that I feel we need to have a consistent behavior on all components.

On the other hand, I know that we have introduced a lot of custom patterns for limel-select, simply because the default standards aren't sometimes good enough, when it comes to providing a sane interaction design and user experience. For instance, we handle the case of having an empty option and a required field, in a certain way. I think it's easier to check the docs to see the details in the "Empty option" example.

So maybe, we can also make an exception here.

Another scenario which is similar to your case this is the chip-set with type="input". If we go your way, it kind of makes sense not to allow a user to clear all chips, once the chipset is filled-in with some, and is required. (there is also a clear all button there). However, required in there may mean "at least one chip" should be there.

🤔 But this keeps me thinking, does it make sense not to allow a user to clear the content of a normal text input field, just because the field is required? I think the answer is no, right?

You see, taking a decision here is a bit tricky…

A better choice however may be:

1. having a prop that optionally allows a consumer to render the clear button (this has no internal smart logic and doesn't magically rely on other boolean props like required)
2. add an internal validation, like limel-select, to indicate that a required but empty date picker is invalid, after an interaction by the user. (won't solve your case, but helpful addition anyways).

If you don't disagree with my proposed solution, feel free to add a PR for this 🙏 and we will review it. And don't forget to run npm run api:update before committing your new prop. If you need help with the PR itself, feel free to call, we can do it together.

[adbc-lime]

I had very similar thoughts and ideas. I get that. Creating and maintaining your own design system is hard.

Regarding points you have made:

1. I don't see the point of hiding clear button it if does not prevent input clearing. User will be able to do that using backspace or native date picker.
2. This won't solve our issue but might be helpful for others.

Sure I can work on the 2 point if you would like to have that.

[Kiarokh]

yes please make a PR and we can take it from there. ;)

User will be able to do that using backspace or native date picker.

The date picker looks like a text input field. But the user cannot type anything in it. It is basically a dropdown list (with a custom dropdown list that looks like a calendar). So there is no way for the users to use backspace, to clear the inserted/chosen date, once it is there.

We have a misleading UI actually. It would have been better to render the date picker's trigger as a dropdown. I'll fix this later in a separate PR.

[adbc-lime]

I might look into validation once I will have more time (probably next week).
It might take some time since I haven't worked with web components and stencil ever before.

I believe issue can be closed now since we came up with some actions to take?

[Kiarokh]

Great. let me know if you wanna mob-program. We can keep the issue open, and then fix-link the PR to it. This way, we keep a better record of the history of the decisions behind the code change. It usually helps for future developers who wonder abut something, or want to improve existing functionality.