Skip to content

LumexDatebox invalid state on backspace press #301

@The-Space-Cowboy

Description

@The-Space-Cowboy

LumexUI Version

2.3.4

Description

When the LumexDatebox is set to Clearable = true and Required=false pressing the backspace key to clear the input puts it in an invalid state. Here are two examples:

Screenshot 1:
Image

Screenshot 2:
Image


This leads to a confusing UX experience. You can see in the 2nd screenshot, we want to allow an "empty/null" state on that date input if the user clears it out.

Steps to reproduce

You can see the behavior on the LumexUI Datebox page here: https://lumexui.org/docs/components/datebox#clear-button

Click to focus into the Datebox input and press "backspace". This will put the date picker into an error state.

Code Snippet:

@{
  DateOnly? _formEndDate = null;
}
 <div class="form-control">
    <label for="trEnd" class="text-sm font-medium text-foreground">End Date</label>
    <LumexDatebox id="trEnd"
        Clearable="true"
        Required="false"
        @bind-Value="formEndDate" />
    <p class="mt-1 text-xs text-gray-500">Leave blank for an open-ended rate.</p>
</div>

Expected behavior

The expected behavior would be a cleared input along with the component's bind-Value getting set to null. The input should also be in a valid state after being cleared if Clearable=true and Required=false.

Notes

No response

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions