Datepicker balChange doesn't trigger on empty value
Detailed description
First, [min] and [max] properties have to be set and valid.
When you manually clear the value of datepicker's input, expected behavior is for it to trigger balChange event, but it doesn't happen. You can try it out in sandbox below.
I believe that problem lies within bal-datepicker.tsx inside following function:
private updateValue(dateString: string | undefined, isHuman = true)
Input value is validated, and internal values are set to undefined, but that doesn't trigger balChange.
if (!isValidIsoString(dateString)) { this.selectedDate = undefined this.value = undefined if (this.nativeInput) { this.nativeInput.value = '' } }
Then empty string isn't equal to undefined, which is fine. But inside of it isDateInRange fails and emition of balChange doesn't happen there as well.
if (this.value !== dateString) { this.value = dateString if (isHuman && this.isDateInRange(parse(this.value as string) as Date)) { this.balChange.emit(this.value) } } }
clastzoo
commented
1 year ago
Datepicker balChange doesn't trigger on empty value
Detailed description
First, [min] and [max] properties have to be set and valid. When you manually clear the value of datepicker's input, expected behavior is for it to trigger balChange event, but it doesn't happen. You can try it out in sandbox below.
I believe that problem lies within bal-datepicker.tsx inside following function:
private updateValue(dateString: string | undefined, isHuman = true)Input value is validated, and internal values are set to undefined, but that doesn't trigger balChange.
if (!isValidIsoString(dateString)) { this.selectedDate = undefined this.value = undefined if (this.nativeInput) { this.nativeInput.value = '' } }Then empty string isn't equal to undefined, which is fine. But inside of it isDateInRange fails and emition of balChange doesn't happen there as well.
if (this.value !== dateString) { this.value = dateString if (isHuman && this.isDateInRange(parse(this.value as string) as Date)) { this.balChange.emit(this.value) } } }Additional information