The .onBlur event is not being called from a date picker field if a new date is selected.
Here is the simple code to reproduce the error:
$w.onReady(function () {
//TODO: write your page related code here…
$w(“#datePicker1”).onFocus( (event, $w) => {
//let eventType = event.type; // “click”
console.log(“datapicker1 field entered”);
});
$w("#datePicker1").onBlur( (event, $w) => {
let targetId = event.target.id; // "myElement"
console.log("datapicker1 field exit");
console.log($w('#datePicker1').value.toLocaleDateString());
});
$w("#input1").onFocus( (event, $w) => {
//let eventType = event.type; // "click"
console.log("name1 field entered");
});
$w("#input1").onBlur( (event, $w) => {
let targetId = event.target.id; // "myElement"
console.log("name1 field exit");
console.log(targetId);
});
});
There are two fields represented here a datePicker field and a normal text entry field.
If the cursor is placed in the text box input1 the .onFocus event is called and the console log appears.
When the text field loses focus by clicking in outside the field, the .onBlur event occurs as expected.
The datePicker field acts the same as the text field (enter & exit) if no new date is selected.
If a new date is selected the .onBlur event does not occur, but the new date is displayed in the form field. Then if the datePicker field again receives focus the .onFocus event occurs. The .onblur event will occur with the new date value as long as the date field remain unchanged.
This seems to be a bug. Any ideas?
There is a second bug with the datePicker field. When the .onBlur event occurs and the code: console.log($w(‘#datePicker1’).value.toLocaleDateString()); runs to display the date in the console, the date is one date earlier than the date selected and displaying in the UI.
Try it and you will see this second bug.