Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-70180

Autocomplete suggestions inside modal forms are not visible

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_400_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE
    • MOODLE_main_MDL-70180
    • Hide

      Please test this in Edge, Firefox, Safari and Chrome

      Test the overflow

      1. login as admin
      2. create at least 5 courses and enrol yourself
      3. navigate to the site calendar
      4. click the new event button
      5. on 'type of event' select course
      6. on the course search input click the arrow button
      7. verify you see all 5 courses, the dropdown should overlap the scrollable container

      Test scrolling modal

      1. add a new assignment activity to a course
      2. in the assignment settings page click the 'choose' button for accepted filetypes
      3. verify the action buttons ("Save changes", "Cancel") in the footer area are visible at all times.
      4. verify there is a vertical scrollbar, allowing to view the rest of the content in the modal's body.

      Test autocomplete in longer scrolling modals

      1. As the admin navigate to Site Administration > Users > Privacies and Policies > Data registry
      2. Click the "Edit" button
      3. Select the purposes option
      4. Click the "Plus" button
      5. Click the Lawful bases autocomplete field
      6. Scroll the modal down or up
      7. Verify the dropdown sticks to the autocomplete field when scrolling down
      8. Click the "Sensitive personal.." auto complete field
      9. Scroll the page up and down
      10. *Verify" the dropdown sticks to the autocomplete field unless it reaches the bottom of the browser window, then it will overlap the autocomplete field.
      Show
      Please test this in Edge, Firefox, Safari and Chrome Test the overflow login as admin create at least 5 courses and enrol yourself navigate to the site calendar click the new event button on 'type of event' select course on the course search input click the arrow button verify you see all 5 courses, the dropdown should overlap the scrollable container Test scrolling modal add a new assignment activity to a course in the assignment settings page click the 'choose' button for accepted filetypes verify the action buttons ("Save changes", "Cancel") in the footer area are visible at all times. verify there is a vertical scrollbar, allowing to view the rest of the content in the modal's body. Test autocomplete in longer scrolling modals As the admin navigate to Site Administration > Users > Privacies and Policies > Data registry Click the "Edit" button Select the purposes option Click the "Plus" button Click the Lawful bases autocomplete field Scroll the modal down or up Verify the dropdown sticks to the autocomplete field when scrolling down Click the "Sensitive personal.." auto complete field Scroll the page up and down *Verify" the dropdown sticks to the autocomplete field unless it reaches the bottom of the browser window, then it will overlap the autocomplete field.

    Description

      We have noticed it in the Workplace theme because we have a lot of modal forms but it can be reproduced in core just as well. The suggestions list for autocomplete elements are not visible in the modal forms that have "scrollable=true" and the scrollable behavior is now default (see MDL-60621, fixversion=3.10)

      As admin on a site that has multiple categories, go to the "Calendar" page and create a new category event. You will see this:

      Attachments

        1. Adding-questions-to-a-quiz-from-the-question-bank_I-should-see-question-01-name-in-the-categoryquestions-table-_49.png
          90 kB
          Marina Glancy
        2. before_patch_ok.png
          71 kB
          Eloy Lafuente (stronk7)
        3. expected.png
          473 kB
          Bas Brands
        4. image-2023-11-17-11-20-14-462.png
          48 kB
          Daniel Neis Araujo
        5. image-2023-11-17-11-22-02-650.png
          56 kB
          Daniel Neis Araujo
        6. MDL-70180_danielpatch.png
          57 kB
          Sara Arjona (@sarjona)
        7. MDL-70180.jpg
          49 kB
          Anna Carissa Sadia
        8. MDL-70180 (July 23).png
          28 kB
          Paul Holden
        9. overflow.png
          813 kB
          Bas Brands
        10. Screenshot from 2020-11-12 12-28-16.png
          30 kB
          Marina Glancy
        11. where_is_the_list.png
          82 kB
          Eloy Lafuente (stronk7)

        Issue Links

          Activity

            People

              Votes:
              3 Vote for this issue
              Watchers:
              23 Start watching this issue

              Dates

                Created:
                Updated:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 4 hours, 35 minutes
                  1d 4h 35m