Skip to main content

Drop-down Lists Solution 2

Demo 3: Redesign the UI

Problem: In the Internet Explorer 11 (IE 11) or Edge browsers, if a user expands the drop-down list, arrows to make their selection and presses Tab then their focus will move to the next visible content BEFORE the dynamic content has a chance to be shown. This problem does NOT occur in Firefox or Chrome.

Solution: Redesign the page to default the Rooms drop-down list to 1 and always display one section of room fields. The same approach won't work for the Number of Children field (since not all reservations are guaranteed to have children) so replace the drop-down list with a set of radio buttons. As a user selects between radio button options the dynamic content automatically displays so it’s always available to receive focus.

Caveat: This approach may not always be a viable option...

  • Have many options (too many to fit on UI in radio button format)
  • Clients do not want to modify their visual design
Room 1
Number of Children

Back to Top