Skip to content

fix: timepicker value gets cleared while typing #394 #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
colinscz merged 3 commits into from
Aug 4, 2025
Merged

fix: timepicker value gets cleared while typing #394 #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
446ac18
fix: timepicker value gets cleared while typing #394
colinscz Jul 28, 2025
8916483
fix: timepicker value gets cleared while typing #394
Jul 30, 2025
db2b40b
fix: update changelog.md for timepicker fix
colinscz Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).

## Upcoming

### Added

### Fixed

- `six-timepicker`: fixed issue with value getting cleared while typing

### Removed

### Changed

## 5.0.0-rc.1 - 2025-07-10

### Added
Expand Down
22 changes: 13 additions & 9 deletions libraries/ui-library/src/components/six-timepicker/six-timepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,15 +268,15 @@ export class SixTimepicker {
valueAsString: '',
});
return;
} else {
// update value and popup value and emit the new value
this.value = inputElement.value;
this.popupValue = parseTimeString(inputElement.value, this.format);
this.sixChange.emit({
value: this.popupValue,
valueAsString: createTimeString(this.popupValue, this.format),
});
}

// update value and popup value, and emit the new value
this.value = inputElement.value;
this.popupValue = parseTimeString(inputElement.value, this.format);
this.sixChange.emit({
value: this.popupValue,
valueAsString: createTimeString(this.popupValue, this.format),
});
}, this.debounce)
);
}
Expand All @@ -299,6 +299,8 @@ export class SixTimepicker {
// normalize value
if (typeof this.value !== 'string' || !isValidTimeString(this.value, this.format)) {
this.value = '';
} else if (this.inputElement != null) {
this.inputElement.value = this.value;
}

// update popup value
Expand Down Expand Up @@ -494,6 +496,9 @@ export class SixTimepicker {

private handleClearClick = (event: MouseEvent) => {
event.stopPropagation();
if (this.inputElement != null) {
this.inputElement.value = '';
}
this.value = '';
this.sixClear.emit();
this.sixChange.emit({
Expand Down Expand Up @@ -550,7 +555,6 @@ export class SixTimepicker {
ref={(el) => (this.inputElement = el)}
part="input"
onClick={() => this.openPopup()}
value={this.value}
placeholder={this.placeholder}
readonly={this.readonly}
disabled={this.disabled}
Expand Down
30 changes: 15 additions & 15 deletions libraries/ui-library/src/components/six-timepicker/test/six-timepicker.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('six-timepicker', () => {
<six-timepicker>
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand All @@ -41,7 +41,7 @@ describe('six-timepicker', () => {
<six-timepicker open="">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="20:00:00">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -84,7 +84,7 @@ describe('six-timepicker', () => {
<six-timepicker open="" value="13:20:59">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -127,7 +127,7 @@ describe('six-timepicker', () => {
<six-timepicker inline="" open="" value="13:20:59">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--hide" errortext="" label="" part="input" size="medium" value="13:20:59">
<six-input class="input--hide" errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -170,7 +170,7 @@ describe('six-timepicker', () => {
<six-timepicker default-time="13:20:59" open="">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -213,7 +213,7 @@ describe('six-timepicker', () => {
<six-timepicker open="" separator="-" value="11:59:20">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="11:59:20">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -256,7 +256,7 @@ describe('six-timepicker', () => {
<six-timepicker format="hh:mm:ss:aa" open="" value="03:45:20:PM">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="03:45:20:PM">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -300,7 +300,7 @@ describe('six-timepicker', () => {
<six-timepicker interval="150" open="" timeout="500" value="13:20:59">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -343,7 +343,7 @@ describe('six-timepicker', () => {
<six-timepicker placeholder="HH:mm:ss">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium" value="">
<six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -371,7 +371,7 @@ describe('six-timepicker', () => {
<six-timepicker readonly="" value="02:00:00">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" readonly="" size="medium" value="02:00:00">
<six-input errortext="" label="" part="input" readonly="" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -399,7 +399,7 @@ describe('six-timepicker', () => {
<six-timepicker disabled="" value="02:00:00">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input disabled="" errortext="" label="" part="input" size="medium" value="02:00:00">
<six-input disabled="" errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -427,7 +427,7 @@ describe('six-timepicker', () => {
<six-timepicker size="small">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" size="small" value="">
<six-input class="input--empty" errortext="" label="" part="input" size="small">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="small">
watch_later
Expand All @@ -450,7 +450,7 @@ describe('six-timepicker', () => {
<six-timepicker size="small">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
<six-input class="input--empty" errortext="" label="" part="input" size="medium">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand All @@ -473,7 +473,7 @@ describe('six-timepicker', () => {
<six-timepicker size="small">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input class="input--empty" errortext="" label="" part="input" size="large" value="">
<six-input class="input--empty" errortext="" label="" part="input" size="large">
<span class="prefix" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down Expand Up @@ -501,7 +501,7 @@ describe('six-timepicker', () => {
<six-timepicker clearable="" icon-position="right" open="" value="13:20:59">
<mock:shadow-root>
<div class="timepicker__container" part="container">
<six-input errortext="" label="" part="input" size="medium" value="13:20:59">
<six-input errortext="" label="" part="input" size="medium">
<span class="prefix prefix--right" part="icon" slot="prefix">
<six-icon size="medium">
watch_later
Expand Down