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

radio render tabindex on a span, then users need to press 1 more redudant tab to put the focus on the radio

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.5.0
    • 8.0.4
    • None
    • Security Level: Jimmy
    • None
    • None

      steps to reproduce

      1. load the zul
      2. focus on the 1st textbox
      3. press tab 1 time
      4. check document.activeElement in the console

      current result

      1. focus on <span class="z-radio" tabindex="2"></span>
      2. when pressing left/right arrow key, we can't move selected radio
      3. chrome, firefox, and edge have the same behavior.

      expected result

      1. focus on <input type="radio">
      2. users can move selected radio by arrow keys

      debug info

      1. Due to <radio> also renders tabindex on both <span> and <input>, so it requires pressing 1 more tab. If I remove the tabindex on the <span>, it works as expected.
        <span id="vYHW4" class="z-radio" tabindex="2"><input type="radio" id="vYHW4-real" name="_pg79o4dn" tabindex="2" checked="checked"><label for="vYHW4-real" id="vYHW4-cnt" class="z-radio-content">yes</label></span>
        

            bobpeng bobpeng
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 3 hours
                1d 3h