-
Bug
-
Resolution: Fixed
-
Normal
-
8.0.5
-
Security Level: Jimmy
-
IOS safari
can be reproduced using Chrome Mobile emulation iPad Pro
-
None
Steps to Reproduce
run the zul code:
<datebox onOK='System.out.println("Event: " + event);' onClick='System.out.println("Event: " + event);' onFocus='System.out.println("Event: " + event);' onChange='System.out.println("Event: " + event + " " + event.getValue());' onBlur='System.out.println("Event: " + event);' />
And click/tap the Datebox button
Pick a date
Click/Tap outside the Datebox
Current Result
Inconsistent event sequences making it difficult to implement a consistent server side logic.
Especially the focus/blur events are missing on IOS Safari.
Chrome Browser:
Event: [Event onFocus <Datebox t6AP1>] Event: [Event onBlur <Datebox t6AP1>] Event: [Event onFocus <Datebox t6AP1>] Event: [InputEvent onChange <Datebox t6AP1>] Aug 16, 2017 Event: [Event onBlur <Datebox t6AP1>]
Mobile Safari:
Event: [InputEvent onChange <Datebox s7BP1>] Aug 16, 2017 Event: [MouseEvent onClick <Datebox s7BP1>]
Expected Result
Consistent event sequence.
Debug Info
Root Cause
Workaround
1) fire the onBlur immediately after calling _doSet instead of before
_doSet: function (child) { var dateboxWidget = this.parent; _xCalendarPop._doSet.apply(this, arguments); dateboxWidget.fire('onBlur', null, null); }
2)focus the input element after choosing a date from the picker (when the user leaves the widget it will trigger onBlur naturally)
_doSet: function (child) { var dateboxWidget = this.parent; _xCalendarPop._doSet.apply(this, arguments); dateboxWidget.focus(); }
Focusing the datebox will trigger iPad keyboard popping up. If clicking OK button means input complete, then keyboard popping up is redundant to users
proposed solution
Focus after clicking the OK button. To avoid triggering the numberic keyboard, set datebox readonly="true" for mobile devices.
Reason:
To keep behavior consistency among browsers for a component, it's important to keep consistent event firing. So Datebox should fire onBlur when users move to another component.