Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.7.2 SP1
    • Fix Version/s: 1.8RC1, 1.8
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Win XP

      Description

      Since release 1.7.2 SP1 selectInputDate supports tabindex attribute.

      Problem: the complete componente inclusive image gets the focus
      -> is it possible to focus only the text input element (for keyboard inputs)
      -> otherwise you have to click into the textfield before input
      1. SelectInputDateRenderer.java
        69 kB
        Lutz Jahoda
      1. screenshot-1.jpg
        18 kB
      2. selectInputDate_focus.JPG
        4 kB

        Activity

        Hide
        Lutz Jahoda added a comment -
        • is it possible to focus
        • the whole component for readonly and disabled components
        • the textfield for all enabled components
        Show
        Lutz Jahoda added a comment - is it possible to focus the whole component for readonly and disabled components the textfield for all enabled components
        Hide
        Lutz Jahoda added a comment -
        • the problem occurs if calendar is rendered as popup
        • to fix this problem you have to add tabindex to the first PassThruAttributeRenderer

        PassThruAttributeRenderer.renderAttributes(facesContext, uiComponent, new String[]

        {"title","tabindex"}

        );

        • i have this quickfix attached
        Show
        Lutz Jahoda added a comment - the problem occurs if calendar is rendered as popup to fix this problem you have to add tabindex to the first PassThruAttributeRenderer PassThruAttributeRenderer.renderAttributes(facesContext, uiComponent, new String[] {"title","tabindex"} ); i have this quickfix attached
        Hide
        Paul Hanneman added a comment - - edited

        I implemented the quickfix attached in this JIRA, and it addresses the problem of focusing to the 'group' or div. However, the tabbing order does not work correctly. I have the tab index is set to: date from text, date to text, select 1, select 2, text 1, text 2, search btn, clear btn in the attached screenshot above. When testing it, the tab order is date from text, date from image (which is ok), date to image, internet address bar, date to text, select 1, select 2, text 1, text 2, search btn, clear btn. When the focus is moved to the calendar image, it seems that the tabindex is 'spoiled' as suggested here ==> http://jira.icefaces.org/browse/ICE-1892

        Both selectInputDate tags are renderAsPopup="true" and partialSubmit="false" The issue is reproducible in MSIE 6.0 and FireFox

        Show
        Paul Hanneman added a comment - - edited I implemented the quickfix attached in this JIRA, and it addresses the problem of focusing to the 'group' or div. However, the tabbing order does not work correctly. I have the tab index is set to: date from text, date to text, select 1, select 2, text 1, text 2, search btn, clear btn in the attached screenshot above. When testing it, the tab order is date from text, date from image (which is ok), date to image, internet address bar, date to text, select 1, select 2, text 1, text 2, search btn, clear btn. When the focus is moved to the calendar image, it seems that the tabindex is 'spoiled' as suggested here ==> http://jira.icefaces.org/browse/ICE-1892 Both selectInputDate tags are renderAsPopup="true" and partialSubmit="false" The issue is reproducible in MSIE 6.0 and FireFox
        Hide
        Paul Hanneman added a comment -

        After more research, the issue seems to be with the tabindex of the image. I added this code to the current fix to set the image to the tabindex of the textbox +1

        (on line 328)

        if(selectInputDate.getTabindex() != null && selectInputDate.getTabindex().trim().length() > 0)

        { int tabIndex = Integer.valueOf(selectInputDate.getTabindex()); ++tabIndex; calendarButton.setAttribute(HTML.TABINDEX_ATTR, Integer.toString(tabIndex)); }

        for a more permanent solution, please add an attribute for the tabindex of the image.

        Show
        Paul Hanneman added a comment - After more research, the issue seems to be with the tabindex of the image. I added this code to the current fix to set the image to the tabindex of the textbox +1 (on line 328) if(selectInputDate.getTabindex() != null && selectInputDate.getTabindex().trim().length() > 0) { int tabIndex = Integer.valueOf(selectInputDate.getTabindex()); ++tabIndex; calendarButton.setAttribute(HTML.TABINDEX_ATTR, Integer.toString(tabIndex)); } for a more permanent solution, please add an attribute for the tabindex of the image.
        Hide
        Lutz Jahoda added a comment -
        • Thanks for your solution.
        • I'm not sure if this is the best solution because all elements behind this selectInputDate element have to set tabindex to tabindex + 1
        • I'm not sure if a html tabindex attribute has to be unique in the whole html page or is it possible to have "sub container" in html where the tabindex order starts with 0 again.
        • This case is currently assigned to an icefaces developer.
        Show
        Lutz Jahoda added a comment - Thanks for your solution. I'm not sure if this is the best solution because all elements behind this selectInputDate element have to set tabindex to tabindex + 1 I'm not sure if a html tabindex attribute has to be unique in the whole html page or is it possible to have "sub container" in html where the tabindex order starts with 0 again. This case is currently assigned to an icefaces developer.
        Hide
        Adnan Durrani added a comment -

        Changes made so the tabindex will be rendered on the input text field in popup mode, and the close button will be rendered with the incremented tabindex.

        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\selectinputdate\SelectInputDateRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\selectinputdate\SelectInputDateRenderer.java
        Completed: At revision: 18318

        Show
        Adnan Durrani added a comment - Changes made so the tabindex will be rendered on the input text field in popup mode, and the close button will be rendered with the incremented tabindex. Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\selectinputdate\SelectInputDateRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\selectinputdate\SelectInputDateRenderer.java Completed: At revision: 18318
        Hide
        Joanne Bai added a comment -

        QA successfully tested it using Tomcat 6 + ICEfaces-1.8.0-RC1 build.5 for calendar component of all three versions of component-showcase

        Browsers tested: FF2, IE6

        Show
        Joanne Bai added a comment - QA successfully tested it using Tomcat 6 + ICEfaces-1.8.0-RC1 build.5 for calendar component of all three versions of component-showcase Browsers tested: FF2, IE6
        Hide
        Joanne Bai added a comment -

        QA successfully tested it on ICEfaces-1.8.1 build.1 + Glassfish v2.1 using component-showcase facelets-enh. The date input field and the calendar close/popup button gain focus separately.

        Browsers tested: FF3, IE8

        Show
        Joanne Bai added a comment - QA successfully tested it on ICEfaces-1.8.1 build.1 + Glassfish v2.1 using component-showcase facelets-enh. The date input field and the calendar close/popup button gain focus separately. Browsers tested: FF3, IE8

          People

          • Assignee:
            Unassigned
            Reporter:
            Lutz Jahoda
          • Votes:
            2 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: