Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-3707

Ionic 5: Wrong element highlighted when clicking

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 4.2.0
    • Accessibility
    • MOODLE_402_STABLE

      This happens in several areas of the app, so far I've seen it:

      • In the course page, when clicking a module the completion box is highlighted.
      • In ddwtos questions, clicking a drag item highlights a link in the question text.
      • In ddimageortext questions, clicking a drag item highlights a link in the question text.

      This highlight is caused by document.activeElement, but I don't know why a wrong element is focused, especially because the clicked element and the focused one aren't parent/children, they're children of sibling elements. Maybe some Ionic magic causes that. Adding stopPropagation and preventDefault doesn't fix it. Putting both elements in different ion-items fixes the issue, but it breaks the D&D question so we cannot do that.

      This issue doesn't affect ddmarker questions though, the reason is that Moodle returns the drag items with tabindex=0. Elements with "tabindex" are considered selectable, so in this case the dragitem is highlighted. This tabindex was added in this commit.

      Adding "tabindex" or similar in the app to the other D&D questions will fix the issue when clicking the draggable items, but clicking anywhere else will still highlight the link so IMO it's not the proper solution.

            Unassigned Unassigned
            dpalou Dani Palou
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.