feat(ui5-date-picker, ui5-daterange-picket, ui5-datetime-picker): introduce show-clear-icon property#13055
feat(ui5-date-picker, ui5-daterange-picket, ui5-datetime-picker): introduce show-clear-icon property#13055
Conversation
|
🧹 Preview deployment cleaned up: https://pr-13055--ui5-webcomponents.netlify.app |
|
2.16 is 3-4 months old, next release is 2.20 |
packages/main/src/DatePicker.ts
Outdated
|
|
||
| _handleClearIconClick() { | ||
| this.value = ""; | ||
| this._dateTimeInput.value = ""; |
There was a problem hiding this comment.
Let's use the approach of giving the value trough the template. if we change the value it will rerender the component, so we can just set the value to the input value
There was a problem hiding this comment.
Actually this function is redundant because the clear icon clears the value in the input and as we spoke to update value on change everything on the normal flow works properly. The function is removed in this change: 8310f9b
nnaydenow
left a comment
nnaydenow
left a comment
There was a problem hiding this comment.
- When typing width is flickering
https://github.com/user-attachments/assets/86e3c347-276f-4f86-ab4c-3af9d58d6286 - There is background for the picker's icon
|
|
||
| :host([show-clear-icon]) .ui5-date-picker-input:not([value]), | ||
| :host([show-clear-icon]) .ui5-date-picker-input[value=""] { | ||
| width: calc(100% + 36px); |
There was a problem hiding this comment.
Looks wrong to me to have something larger than 100%
| } | ||
|
|
||
| :host([show-clear-icon]) .ui5-date-picker-input:not([value]), | ||
| :host([show-clear-icon]) .ui5-date-picker-input[value=""] { |
There was a problem hiding this comment.
I don't understand why do we need all these overrides if custom icons are supported in ui5-input. Could you share the idea of doing that?
| <CustomFormatting /> No newline at end of file | ||
| <CustomFormatting /> | ||
|
|
||
| ### DatePicker with Clear Icon |
There was a problem hiding this comment.
No need to mention Datepicker here.
Also it would be good to add such sample in DateTimePicker and DateRangePicker
5 participants
Introduces a new show-clear-icon property to the DatePicker, DateRangePicker and DateTimePicker components that displays a clear icon inside the input field. When clicked, the icon clears the input value.
Changes: