Skip to content

Commit a9979af

Browse files
colinsczBirrer, Iwan
colinscz
and
Birrer, Iwan
authored
fix: timepicker value gets cleared while typing #394 (#396)
* fix: timepicker value gets cleared while typing #394 * fix: timepicker value gets cleared while typing #394 * fix: update changelog.md for timepicker fix --------- Co-authored-by: Birrer, Iwan <iwan.birrer@six-group.com>
1 parent eb446eb commit a9979af

3 files changed

Lines changed: 38 additions & 24 deletions

File tree

‎docs/changelog.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
66

77
## Upcoming
88

9+
### Added
10+
11+
### Fixed
12+
13+
- `six-timepicker`: fixed issue with value getting cleared while typing
14+
15+
### Removed
16+
17+
### Changed
18+
919
## 5.0.0-rc.1 - 2025-07-10
1020

1121
### Added

‎libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -268,15 +268,15 @@ export class SixTimepicker {
268268
valueAsString: '',
269269
});
270270
return;
271+
} else {
272+
// update value and popup value and emit the new value
273+
this.value = inputElement.value;
274+
this.popupValue = parseTimeString(inputElement.value, this.format);
275+
this.sixChange.emit({
276+
value: this.popupValue,
277+
valueAsString: createTimeString(this.popupValue, this.format),
278+
});
271279
}
272-
273-
// update value and popup value, and emit the new value
274-
this.value = inputElement.value;
275-
this.popupValue = parseTimeString(inputElement.value, this.format);
276-
this.sixChange.emit({
277-
value: this.popupValue,
278-
valueAsString: createTimeString(this.popupValue, this.format),
279-
});
280280
}, this.debounce)
281281
);
282282
}
@@ -299,6 +299,8 @@ export class SixTimepicker {
299299
// normalize value
300300
if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
301301
this.value = '';
302+
} else if (this.inputElement != null) {
303+
this.inputElement.value = this.value;
302304
}
303305

304306
// update popup value
@@ -494,6 +496,9 @@ export class SixTimepicker {
494496

495497
private handleClearClick = (event: MouseEvent) => {
496498
event.stopPropagation();
499+
if (this.inputElement != null) {
500+
this.inputElement.value = '';
501+
}
497502
this.value = '';
498503
this.sixClear.emit();
499504
this.sixChange.emit({
@@ -550,7 +555,6 @@ export class SixTimepicker {
550555
ref={(el) => (this.inputElement = el)}
551556
part="input"
552557
onClick={() => this.openPopup()}
553-
value={this.value}
554558
placeholder={this.placeholder}
555559
readonly={this.readonly}
556560
disabled={this.disabled}

‎libraries/ui-library/src/components/six-timepicker/test/six-timepicker.spec.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('six-timepicker', () => {
1717
<six-timepicker>
1818
<mock:shadow-root>
1919
<div class="timepicker__container" part="container">
20-
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
20+
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
2121
<span class="prefix" part="icon" slot="prefix">
2222
<six-icon size="medium">
2323
watch_later
@@ -41,7 +41,7 @@ describe('six-timepicker', () => {
4141
<six-timepicker open="">
4242
<mock:shadow-root>
4343
<div class="timepicker__container" part="container">
44-
<six-input errortext="" label="" part="input" size="medium" value="20:00:00">
44+
<six-input errortext="" label="" part="input" size="medium">
4545
<span class="prefix" part="icon" slot="prefix">
4646
<six-icon size="medium">
4747
watch_later
@@ -84,7 +84,7 @@ describe('six-timepicker', () => {
8484
<six-timepicker open="" value="13:20:59">
8585
<mock:shadow-root>
8686
<div class="timepicker__container" part="container">
87-
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
87+
<six-input errortext="" label="" part="input" size="medium">
8888
<span class="prefix" part="icon" slot="prefix">
8989
<six-icon size="medium">
9090
watch_later
@@ -127,7 +127,7 @@ describe('six-timepicker', () => {
127127
<six-timepicker inline="" open="" value="13:20:59">
128128
<mock:shadow-root>
129129
<div class="timepicker__container" part="container">
130-
<six-input class="input--hide" errortext="" label="" part="input" size="medium" value="13:20:59">
130+
<six-input class="input--hide" errortext="" label="" part="input" size="medium">
131131
<span class="prefix" part="icon" slot="prefix">
132132
<six-icon size="medium">
133133
watch_later
@@ -170,7 +170,7 @@ describe('six-timepicker', () => {
170170
<six-timepicker default-time="13:20:59" open="">
171171
<mock:shadow-root>
172172
<div class="timepicker__container" part="container">
173-
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
173+
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
174174
<span class="prefix" part="icon" slot="prefix">
175175
<six-icon size="medium">
176176
watch_later
@@ -213,7 +213,7 @@ describe('six-timepicker', () => {
213213
<six-timepicker open="" separator="-" value="11:59:20">
214214
<mock:shadow-root>
215215
<div class="timepicker__container" part="container">
216-
<six-input errortext="" label="" part="input" size="medium" value="11:59:20">
216+
<six-input errortext="" label="" part="input" size="medium">
217217
<span class="prefix" part="icon" slot="prefix">
218218
<six-icon size="medium">
219219
watch_later
@@ -256,7 +256,7 @@ describe('six-timepicker', () => {
256256
<six-timepicker format="hh:mm:ss:aa" open="" value="03:45:20:PM">
257257
<mock:shadow-root>
258258
<div class="timepicker__container" part="container">
259-
<six-input errortext="" label="" part="input" size="medium" value="03:45:20:PM">
259+
<six-input errortext="" label="" part="input" size="medium">
260260
<span class="prefix" part="icon" slot="prefix">
261261
<six-icon size="medium">
262262
watch_later
@@ -300,7 +300,7 @@ describe('six-timepicker', () => {
300300
<six-timepicker interval="150" open="" timeout="500" value="13:20:59">
301301
<mock:shadow-root>
302302
<div class="timepicker__container" part="container">
303-
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
303+
<six-input errortext="" label="" part="input" size="medium">
304304
<span class="prefix" part="icon" slot="prefix">
305305
<six-icon size="medium">
306306
watch_later
@@ -343,7 +343,7 @@ describe('six-timepicker', () => {
343343
<six-timepicker placeholder="HH:mm:ss">
344344
<mock:shadow-root>
345345
<div class="timepicker__container" part="container">
346-
<six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium" value="">
346+
<six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium">
347347
<span class="prefix" part="icon" slot="prefix">
348348
<six-icon size="medium">
349349
watch_later
@@ -371,7 +371,7 @@ describe('six-timepicker', () => {
371371
<six-timepicker readonly="" value="02:00:00">
372372
<mock:shadow-root>
373373
<div class="timepicker__container" part="container">
374-
<six-input errortext="" label="" part="input" readonly="" size="medium" value="02:00:00">
374+
<six-input errortext="" label="" part="input" readonly="" size="medium">
375375
<span class="prefix" part="icon" slot="prefix">
376376
<six-icon size="medium">
377377
watch_later
@@ -399,7 +399,7 @@ describe('six-timepicker', () => {
399399
<six-timepicker disabled="" value="02:00:00">
400400
<mock:shadow-root>
401401
<div class="timepicker__container" part="container">
402-
<six-input disabled="" errortext="" label="" part="input" size="medium" value="02:00:00">
402+
<six-input disabled="" errortext="" label="" part="input" size="medium">
403403
<span class="prefix" part="icon" slot="prefix">
404404
<six-icon size="medium">
405405
watch_later
@@ -427,7 +427,7 @@ describe('six-timepicker', () => {
427427
<six-timepicker size="small">
428428
<mock:shadow-root>
429429
<div class="timepicker__container" part="container">
430-
<six-input class="input--empty" errortext="" label="" part="input" size="small" value="">
430+
<six-input class="input--empty" errortext="" label="" part="input" size="small">
431431
<span class="prefix" part="icon" slot="prefix">
432432
<six-icon size="small">
433433
watch_later
@@ -450,7 +450,7 @@ describe('six-timepicker', () => {
450450
<six-timepicker size="small">
451451
<mock:shadow-root>
452452
<div class="timepicker__container" part="container">
453-
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
453+
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
454454
<span class="prefix" part="icon" slot="prefix">
455455
<six-icon size="medium">
456456
watch_later
@@ -473,7 +473,7 @@ describe('six-timepicker', () => {
473473
<six-timepicker size="small">
474474
<mock:shadow-root>
475475
<div class="timepicker__container" part="container">
476-
<six-input class="input--empty" errortext="" label="" part="input" size="large" value="">
476+
<six-input class="input--empty" errortext="" label="" part="input" size="large">
477477
<span class="prefix" part="icon" slot="prefix">
478478
<six-icon size="medium">
479479
watch_later
@@ -501,7 +501,7 @@ describe('six-timepicker', () => {
501501
<six-timepicker clearable="" icon-position="right" open="" value="13:20:59">
502502
<mock:shadow-root>
503503
<div class="timepicker__container" part="container">
504-
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
504+
<six-input errortext="" label="" part="input" size="medium">
505505
<span class="prefix prefix--right" part="icon" slot="prefix">
506506
<six-icon size="medium">
507507
watch_later

0 commit comments

Comments
 (0)