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

Bring back unique id on form row wrapper div

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Dom inspection (Boost only)

      This test section need only be performed on the Boost theme (there are no changes to ids on clean theme)

      1. Log in and go to a course
      2. Create an assignment
      3. Edit the assignment settings
      4. Open your browser's dev tools
      5. Inspect the "Assignment name" text input
      6. Verify the id is 'id_name'
      7. Check the container div 2 levels up from this element in the dom inspector
      8. Verify the id of this div is 'fitem_id_name'
      9. Scroll down to the "Availability" section
      10. Inspect the 'Due date' label
      11. Check the container div 2 levels up from this element in the dom inspector
      12. Verify the id of this div is 'fitem_id_duedate'
      13. Now, inspect the day of the month selector for the due date (the first select element in that row)
      14. Verify the id of the select is 'id_duedate_day'
      15. Scroll down to submission types
      16. Inspect the "Online text" checkbox
      17. Verify the id of the element is 'id_assignsubmission_onlinetext_enabled'
      18. Check the container div 3 levels up from this element in the dom inspector (the element with data-groupname set on it)
      19. Verify the id of this div is 'fgroup_id_submissionplugins'

      Group rule console error

      This test section should be performed on Boost and clean themes

      1. Go to a course
      2. Open your browser's dev tools and select console.
      3. In the course settings, click more (if on Clean, you can skip this step and the next and just visit the 'export' link in the course admin block directly)
      4. Under Question bank, click export
      5. Verify you see no console errors
      Show
      Dom inspection (Boost only) This test section need only be performed on the Boost theme (there are no changes to ids on clean theme) Log in and go to a course Create an assignment Edit the assignment settings Open your browser's dev tools Inspect the "Assignment name" text input Verify the id is 'id_name' Check the container div 2 levels up from this element in the dom inspector Verify the id of this div is 'fitem_id_name' Scroll down to the "Availability" section Inspect the 'Due date' label Check the container div 2 levels up from this element in the dom inspector Verify the id of this div is 'fitem_id_duedate' Now, inspect the day of the month selector for the due date (the first select element in that row) Verify the id of the select is 'id_duedate_day' Scroll down to submission types Inspect the "Online text" checkbox Verify the id of the element is 'id_assignsubmission_onlinetext_enabled' Check the container div 3 levels up from this element in the dom inspector (the element with data-groupname set on it) Verify the id of this div is 'fgroup_id_submissionplugins' Group rule console error This test section should be performed on Boost and clean themes Go to a course Open your browser's dev tools and select console. In the course settings, click more (if on Clean, you can skip this step and the next and just visit the 'export' link in the course admin block directly) Under Question bank, click export Verify you see no console errors
    • Difficulty:
      Easy
    • Affected Branches:
      MOODLE_32_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_35_STABLE, MOODLE_36_STABLE
    • Pull from Repository:
    • Pull 3.5 Branch:
      MDL-62550-35-2
    • Pull 3.6 Branch:
      MDL-62550-36-2
    • Pull Master Branch:
      MDL-62550-master-2

      Description

      The core form library used to add id=fitem_unique_id to the outer div that contained a form label/input pairing.

      When the templates were added, this feature was lost for the new templates in Boost (though it's still in the core templates that emulate the old form HTML).

      These id's are very handy for plugin or theme developers to target specific form element with CSS.

      See MDL-60466 for an example. I've found myself resorting to fragile CSS like "target the third form item" which can break if future development or user options add or remove any items to the form.

      Probably just copying the old syntax would be good.

       

      Old syntax:

      https://github.com/moodle/moodle/blob/master/lib/form/templates/element-template.mustache#L49

      New, minus unique identifier:

      https://github.com/moodle/moodle/blob/master/theme/boost/templates/core_form/element-template.mustache#L44

      The inline template would need changed to match

      https://github.com/moodle/moodle/blob/master/theme/boost/templates/core_form/element-template-inline.mustache#L1

       
      The lack of this id exhibits itself if form groups are used with addRule. There is poor support for this generally speaking, but there is an obvious console error in Boost because this id is missing:

      1. Open your browser's dev tools and select the console.
      2. Go to a course > question bank > export.
      3. Notice the console error.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                5 Vote for this issue
                Watchers:
                11 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  14/Jan/19

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 hour
                  1h