[OPEN] [#1673] 4.8.3 - New bug on DateField select event

Support,

This gets interesting now :)

Test #1:
Go ahead and load page and click the date TRIGGER icon and you get the calendar properly.
[test passes]

Test #2:
Go ahead and FIRST press the "test" button. We get a popup. This is "expected" due to change in ext 4.8.3 that fires select on setValue. click ok
Now go ahead and click the date TRIGGER icon
Expectation: Get the calendar widget
Actual: We get the 'oh crap' popup.

Well that is unexpected :)
We certainly should NOT see the select event firing when I trigger the calendar widget from the DateField.

Thanks
/Z

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title>test</title> <script type="text/javascript"> var movePeriodBySelect = function () { alert('oh crap'); }; </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" Theme="Triton"> </ext:ResourceManager> <ext:Panel ID="Window1" runat="server" Title="SetValue bug" IconCls="x-fa fa-gears" Width="200" Height="350"> <TopBar> <ext:Toolbar runat="server" Layout="Container"> <Items> <ext:Toolbar runat="server" Flat="false"> <Items> <ext:DateField ID="DateFieldTest" runat="server"> <Listeners> <Select Handler="movePeriodBySelect()" /> </Listeners> </ext:DateField> </Items> </ext:Toolbar> </Items> </ext:Toolbar> </TopBar> <Items> <ext:Button runat="server" Text="test"> <Listeners> <Click Handler="App.DateFieldTest.setValue('08/01/2019');" /> </Listeners> </ext:Button> </Items> </ext:Panel> </form> </body> </html>

Hello @Z!

We got your issue!

Something interesting about it is, usually when examples comes with window.alert() calls, I change them to Ext.toast() to avoid the nuisance of clicking 'ok' to continue.

And in fact, if I just use Ext.toast() instead of the blocking window.alert() call, the issue will no longer be reproducible.

In fact, by the blocking nature of window.alert(), even if you don't click the "test" button, you'll eventually get even stuck as the alert dialog steals the focus of the component and it will keep alerting over and over, endlessly.

It can also happen that you can first select, then the second time onwards the picker does not show up bringing the alert dialog. You can also notice it triggering the select event twice. For these two phrases, it happens as you may have been focused in the DateField's input element; when you click the trigger, the focus is taken out to the picker thus firing a setValue() call, which loops back to another select event.

So in the end, the issue here is mainly because the window.alert() dialog is fighting with the focus of the component, triggering several FocusLeave events which triggers the select one. The looping part could be improved if we instructed setValue() to exit earlier if the value is the same from the last set one, but in some situations one would like to have the select event to be triggered whenever a value is selected, even if that's the same date.

We'll still need to look further up this issue but at first, you can completely avoid it by just not using window.alert() or something that takes out focus, like a callout, notification, or Ext.toast().

Maybe you can just fire the select event from the picker itself? So you ensure it is handled only when a date is clicked from the picker, and avoid all this hassle introduced by 6.7.0? Try this:

Code:

<PickerOptions runat="server"> <Listeners> <Select Handler="Ext.toast('Picker-side selection happened.'); item.ownerCmp.setValue(date); item.hide();" /> </Listeners> </PickerOptions>

From within your DateField component.

Please be aware that the example i created a super simplified example so i can show you the issue. Our production code (that manifests the problem) is more complex. I changed our production from alert to Ext.Msg and it is still a problem. There is some underlying issue that using setValue on the DateField causes the select handler to fire when the trigger is activated. Your solution 'owner setValue' doesn't apply to the way our production code is structured.

Please review and try to fix this pls.

Thanks
/Z

Hello @Z!

With further investigation we mentioned in our last post, it was identified an issue where Ext JS has a failing check that would allow the event only to trigger when the value was effectively changed.

We also logged this under issue #1673 so we can get it fixed to our next release.

Can you confirm this override applied to your pages resolve the issue? If still not, what else should be added to the test case to keep reproducing the undesired behavior?

Code:

Ext.define("gh1673", { override: 'Ext.form.field.Date', didValueChange: function (newVal, oldVal) { var me = this; if (newVal instanceof Date && !(oldVal instanceof Date)) { oldVal = me.parseDate(oldVal); } else if (!(newVal instanceof Date) && oldVal instanceof Date) { newVal = me.parseDate(newVal); } return !me.isEqual(newVal, oldVal); } });

Looking forward to your follow-up.

I tested it and the fix works.
Thanks.
/Z

Hello Zev!

Thanks for your feedback, and glad it really solved the problem you were facing, both in the test case and in your production environment!

The fix proposed above was merged in Ext.NET 5 branch, so that it will no longer be necessary to keep the override when Ext.NET 5.0.0 final is released.

EDIT: sorry, written "Zed" when it should be "Zev"