Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3717

onBlur event missing on IOS Datebox

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.0.5
    • Fix Version/s: 8.5.0
    • Component/s: Components
    • Security Level: Jimmy
    • Labels:
    • Environment:

      IOS safari
      can be reproduced using Chrome Mobile emulation iPad Pro

      Description

      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.

        Attachments

          Activity

            People

            • Assignee:
              bobpeng bobpeng
              Reporter:
              cor3000 cor3000
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 1 day Original Estimate - 1 day
                1d
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 5 hours
                4d 5h