ICEfaces
  1. ICEfaces
  2. ICE-8453

ace:dateTimeEntry - tab order is lost after selecting a date with the mouse

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.0.0.GA, 3.1
    • Fix Version/s: EE-3.0.0.GA_P01, 3.2
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Firefox, IE

      Description

      When a date is selected via the popup dialog, focus is lost and therefore the tab order is gone and you can't tab into the next field. Tabbing into the date input field and then changing the date via the keyboard does retain the tab order.

        Issue Links

          Activity

          Hide
          Arran Mccullough added a comment -

          Attached test case that shows this issue.

          Steps:

          • Load welcomeICEfaces.jsf
          • Type in some text into the Input #1 input field.
          • Tab into the dateTimeEntry field.
          • Select a date via the mouse.
          • Click the tab key, focus is sent elsewhere and not the next input field.
          Show
          Arran Mccullough added a comment - Attached test case that shows this issue. Steps: Load welcomeICEfaces.jsf Type in some text into the Input #1 input field. Tab into the dateTimeEntry field. Select a date via the mouse. Click the tab key, focus is sent elsewhere and not the next input field.
          Hide
          Ken Fyten added a comment -

          Seems that the focus should be returned to either the popup button, or the input field when a value is selected that closes the popup. Perhaps the component could keep track of which element triggered the popup display and return focus to that when it closes.

          Show
          Ken Fyten added a comment - Seems that the focus should be returned to either the popup button, or the input field when a value is selected that closes the popup. Perhaps the component could keep track of which element triggered the popup display and return focus to that when it closes.
          Hide
          yip.ng added a comment - - edited

          First major problem: it would get into an infinite cycle of focus-popup-select-focus ... See video: http://screencast.com/t/CWqrYSv8k.

          Need to remember the handle to the focus listener (need to restructure listener if it's anonymous) and temporarily detach listener first?

          There seems to be already an attempt (crude and buggy?) by the original author to restore focus, but it never worked. See screenshot-01.png.

          Show
          yip.ng added a comment - - edited First major problem: it would get into an infinite cycle of focus-popup-select-focus ... See video: http://screencast.com/t/CWqrYSv8k . Need to remember the handle to the focus listener (need to restructure listener if it's anonymous) and temporarily detach listener first? There seems to be already an attempt (crude and buggy?) by the original author to restore focus, but it never worked. See screenshot-01.png.
          Hide
          yip.ng added a comment -

          Second major problem:

          All attempts work only on FF, not on IE, even when using purely jQuery API, which is supposed to be highly cross-browser.

          1. IE has strange way of handling focus event, as if the event were queued and executed a bit later. See, for example, this article: http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/

          2. Using the jQuery event API, a focus() will generate 2 focus events in IE. One seems to be a customized jQuery event, the other seems to a standard DOM event.

          Show
          yip.ng added a comment - Second major problem: All attempts work only on FF, not on IE, even when using purely jQuery API, which is supposed to be highly cross-browser. 1. IE has strange way of handling focus event, as if the event were queued and executed a bit later. See, for example, this article: http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/ 2. Using the jQuery event API, a focus() will generate 2 focus events in IE. One seems to be a customized jQuery event, the other seems to a standard DOM event.
          Hide
          yip.ng added a comment - - edited

          As per suggestion from Ken, used timer. Doesn't work either. See trace and explanation in screenshot-02.png. This also rules out possible causes suggested by Mark of event nesting and ordering.

          Show
          yip.ng added a comment - - edited As per suggestion from Ken, used timer. Doesn't work either. See trace and explanation in screenshot-02.png. This also rules out possible causes suggested by Mark of event nesting and ordering.
          Hide
          yip.ng added a comment - - edited

          Another suggestion from Ken: reset don't-show flag on blur instead of right after focus(). Working. Tested: IE7, IE8, IE9, FF15.

          Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js
          Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt
          Completed: At revision: 30636

          Modified: C:\svn\ossrepo\icefaces3\branches\icefaces-3.0.x-maintenance\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js
          Adding: C:\svn\ossrepo\icefaces3\branches\icefaces-3.0.x-maintenance\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt
          Completed: At revision: 30637

          Show
          yip.ng added a comment - - edited Another suggestion from Ken: reset don't-show flag on blur instead of right after focus(). Working. Tested: IE7, IE8, IE9, FF15. Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt Completed: At revision: 30636 Modified: C:\svn\ossrepo\icefaces3\branches\icefaces-3.0.x-maintenance\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js Adding: C:\svn\ossrepo\icefaces3\branches\icefaces-3.0.x-maintenance\icefaces\ace\component\resources\icefaces.ace\jquery\ui\readme.txt Completed: At revision: 30637
          Hide
          yip.ng added a comment - - edited

          The popup button can be an image on a button or just the image by itself. When it is just an image, it cannot be focused or tabbed to (unless browser supports ARIA and you assign a tab index?). Whether a button or an image, the original behavior of the date picker is already to set the focus to the input field when you popup the calendar by clicking the image/button, as if you were using on focus to popup the calendar. (May be the click just calls the on focus show popup listener of the input field?)

          Show
          yip.ng added a comment - - edited The popup button can be an image on a button or just the image by itself. When it is just an image, it cannot be focused or tabbed to (unless browser supports ARIA and you assign a tab index?). Whether a button or an image, the original behavior of the date picker is already to set the focus to the input field when you popup the calendar by clicking the image/button, as if you were using on focus to popup the calendar. (May be the click just calls the on focus show popup listener of the input field?)
          Hide
          yip.ng added a comment -

          Third major problem:

          Test case doesn't have ajax submit enabled. When ajax event is added for date select, the focus is lost after coming back from server. The log trace shows that the re-focusing is being done by the framework, yet the focus can't be found anywhere. See screenshot-03.png.

          Show
          yip.ng added a comment - Third major problem: Test case doesn't have ajax submit enabled. When ajax event is added for date select, the focus is lost after coming back from server. The log trace shows that the re-focusing is being done by the framework, yet the focus can't be found anywhere. See screenshot-03.png.
          Hide
          Ken Fyten added a comment -

          New JIRA ICE-8558 created for the remaining issue with ace:ajax.

          Show
          Ken Fyten added a comment - New JIRA ICE-8558 created for the remaining issue with ace:ajax.

            People

            • Assignee:
              Mircea Toma
              Reporter:
              Arran Mccullough
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: