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

Toggle-all checkbox publishes multiple events with an inconsistent data

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MOODLE_38_STABLE, MOODLE_39_STABLE
    • MDL-69525-39-1
    • MDL-69525-master-1
    • Hide

      Setup

      1. Unzip the attached file (checkboxtoggleallevents.zip) into the /local/ directory of your moodle installation
      2. Login as Admin.
      3. Install the local plugin and navigate to the following URL: PATHTOMOODLEINSTANCE/local/checkboxtoggleallevents/index.php
      4. Open the console in the browser to observe the fired events which should be captured in the console.

      Test 1 (Events fired when using the toggle-all checkbox in a specific toggle group to toggle all child checkboxes)

      1. Click on the 'toggle-all' (parent) checkbox for "Group 1" in order to select all child checkboxes in the related column.
        1. Confirm all checkboxes in the Group 1 column are checked
        2. Confirm the action elements - "Select action.." and "Submit" button are now enabled
        3. Confirm that only one data object is captured in the console with the following attributes:
          • 'toggleGroupName' = 'participants-table option-1'
          • 'slaves' contains the 3 existing child checkbox elements from Group 1
          • 'checkedSlaves' contains the 3 checked child checkbox elements from Group 1
          • 'anyChecked' = true
        4. Clear the console.
      2. Click again (uncheck) on the 'toggle-all' (parent) checkbox for "Group 1" in order to unselect all child checkboxes in the related column.
        1. Confirm the checkboxes in the Group 1 column are not checked
        2. Confirm the action elements - "Select action.." and "Submit" button are now disabled
        3. Confirm that only one data object is captured in the console with the following attributes**
          • 'toggleGroupName' = 'participants-table option-1'
          • 'slaves' contains the 3 existing child checkbox elements from Group 1
          • 'checkedSlaves' should not contain any elements
          • 'anyChecked' = false
        4. Clear the console.

      Test 2 (Events fired when individually toggling child checkboxes from a specific toggle group)

      1. Click on the child checkboxes in "Group 2" and check all of them individually, one by one. Observe the console each time a child checkbox is checked.
        1. Confirm the action elements - "Select action.." and "Submit" button are now enabled
        2. Confirm that only one data object is captured in the console each time with the following attributes**
          • 'toggleGroupName' = 'participants-table option-2'
          • 'slaves' contains the 3 existing child checkbox elements from Group 2
          • 'checkedSlaves' contains the checked child checkbox elements from Group 2
          • 'anyChecked' = true
        3. Clear the console.
      2. Once all of the child checkboxes are selected in Group 2
        • confirm the toggle-all (parent) checkbox for Group 2 is automatically checked.
      3. Uncheck individually, one by one, all of the selected checkboxes in "Group 2". Observe the console each time a checkbox is unchecked.
        1. Confirm that only one data object is captured in the console with the following attributes
          • 'toggleGroupName' = 'participants-table option-2'
          • 'slaves' contains the 3 existing child checkbox elements from Group 2
          • 'checkedSlaves' should not contain any elements**
          • 'anyChecked' = true (or false when all of the checkboxes are unselected)
        2. Clear the console.
      4. Once one of the child checkboxes is unchecked in Group 2
        1. Confirm the toggle-all (parent) checkbox for Group 2 is automatically unchecked.
      5. Once all of the child checkboxes are unchecked in Group 2
        1. Confirm the action elements - "Select action.." and "Submit" button are now disabled

      Test 3 (Events fired when toggling a parent master button/checkbox)

      1. Click on the "Select all" button.
        1. Confirm all checkboxes are checked
        2. Confirm the action elements - "Select action.." and "Submit" button are now enabled
        3. Confirm that only one data object is captured in the console with the following attributes:
          1. 'toggleGroupName' = 'participants-table'
          2. 'slaves' contains the 11 existing child checkbox elements from every group and subgroup
          3. 'checkedSlaves' contains the 11 checked child checkbox element from every group and subgroup
          4. 'anyChecked' = true
        4. Clear the console.
      2. Click on the "Deselect all" button.
        1. Confirm all checkboxes are unchecked
        2. Confirm the action elements - "Select action.." and "Submit" button are now disabled
        3. Confirm that only one data object is captured in the console with the following attributes:
          1. 'toggleGroupName' = 'participants-table'
          2. 'slaves' contains the 11 existing child checkbox elements from every group and subgroup
          3. 'checkedSlaves' should not contain any elements
          4. 'anyChecked' = false
        4. Clear the console.

      Test 4 (Performance)

      1. Login as Admin
      2. Go to Site Administration > Development > Debugging
        1. Set 'Debug messages' = "DEVELOPER ..."
      3. Go to Site Administration > Development > Make test course
        1. Create a test course of size M
      4. Go to the created Course M
      5. Go to to the Participants page
      6. Go to the Bottom of the page and click on the "Show all 1000" link to show all participants
      7. When all of the course participants are displayed, go back to the top of the page and click on the "select-all" checkbox
        1. confirm that all of the checkboxes are instantly selected and there is no significant delay

       

      Show
      Setup Unzip the attached file (checkboxtoggleallevents.zip) into the /local/ directory of your moodle installation Login as Admin. Install the local plugin and navigate to the following URL: PATHTOMOODLEINSTANCE/local/checkboxtoggleallevents/index.php Open the console in the browser to observe the fired events which should be captured in the console. Test 1 (Events fired when using the toggle-all checkbox in a specific toggle group to toggle all child checkboxes) Click on the 'toggle-all' (parent) checkbox for " Group 1 " in order to select all child checkboxes in the related column. Confirm all checkboxes in the Group 1 column are checked Confirm the action elements - "Select action.." and "Submit" button are now enabled Confirm that only one data object is captured in the console with the following attributes: 'toggleGroupName' = 'participants-table option-1' 'slaves' contains the 3 existing child checkbox elements from Group 1 'checkedSlaves' contains the 3 checked child checkbox elements from Group 1 'anyChecked' = true Clear the console. Click again (uncheck) on the 'toggle-all' (parent) checkbox for " Group 1 " in order to unselect all child checkboxes in the related column. Confirm the checkboxes in the Group 1 column are not checked Confirm the action elements - "Select action.." and "Submit" button are now disabled Confirm that only one data object is captured in the console with the following attributes ** 'toggleGroupName' = 'participants-table option-1' 'slaves' contains the 3 existing child checkbox elements from Group 1 'checkedSlaves' should not contain any elements 'anyChecked' = false Clear the console. Test 2 (Events fired when individually toggling child checkboxes from a specific toggle group) Click on the child checkboxes in "Group 2" and check all of them individually, one by one. Observe the console each time a child checkbox is checked. Confirm the action elements - "Select action.." and "Submit" button are now enabled Confirm that only one data object is captured in the console each time with the following attributes ** 'toggleGroupName' = 'participants-table option-2' 'slaves' contains the 3 existing child checkbox elements from Group 2 'checkedSlaves' contains the checked child checkbox elements from Group 2 'anyChecked' = true Clear the console. Once all of the child checkboxes are selected in Group 2 confirm the toggle-all (parent) checkbox for Group 2 is automatically checked. Uncheck individually, one by one, all of the selected checkboxes in "Group 2". Observe the console each time a checkbox is unchecked. Confirm that only one data object is captured in the console with the following attributes 'toggleGroupName' = 'participants-table option-2' 'slaves' contains the 3 existing child checkbox elements from Group 2 'checkedSlaves' should not contain any elements ** 'anyChecked' = true (or false when all of the checkboxes are unselected) Clear the console. Once one of the child checkboxes is unchecked in Group 2 Confirm the toggle-all (parent) checkbox for Group 2 is automatically unchecked. Once all of the child checkboxes are unchecked in Group 2 Confirm the action elements - "Select action.." and "Submit" button are now disabled Test 3 (Events fired when toggling a parent master button/checkbox) Click on the "Select all" button. Confirm all checkboxes are checked Confirm the action elements - "Select action.." and "Submit" button are now enabled Confirm that only one data object is captured in the console with the following attributes: 'toggleGroupName' = 'participants-table' 'slaves' contains the 11 existing child checkbox elements from every group and subgroup 'checkedSlaves' contains the 11 checked child checkbox element from every group and subgroup 'anyChecked' = true Clear the console. Click on the "Deselect all" button. Confirm all checkboxes are unchecked Confirm the action elements - "Select action.." and "Submit" button are now disabled Confirm that only one data object is captured in the console with the following attributes: 'toggleGroupName' = 'participants-table' 'slaves' contains the 11 existing child checkbox elements from every group and subgroup 'checkedSlaves' should not contain any elements 'anyChecked' = false Clear the console. Test 4 (Performance) Login as Admin Go to Site Administration > Development > Debugging Set ' Debug messages ' = "DEVELOPER ..." Go to Site Administration > Development > Make test course Create a test course of size M Go to the created Course M Go to to the Participants page Go to the Bottom of the page and click on the "Show all 1000" link to show all participants When all of the course participants are displayed, go back to the top of the page and click on the "select-all" checkbox confirm that all of the checkboxes are instantly selected and there is no significant delay  
    • 3
    • 4.0 holding pattern 5

    Description

      When selecting/deselecting the toggle-all (parent) checkbox, multiple events with an inconsistent data are being fired. This makes it really hard for a subscriber to properly utilize the data. Also, this causes performance issues which are noticeable when attempting to bulk select larger set of data (takes ~ 5 sec to bulk select ~ 1000 records).

      Ideally, a single event should be fired after changing the state of the toggle-all (parent) checkbox and it's data should reflect the final state of the child checkboxes in the specific toggle group.

      Steps to reproduce:

      1. Unzip the attached local plugin into the /local/ directory of your moodle installation
      2. Login as Admin.
      3. Install the plugin and go to PATHTOMOODLEINSTANCE/local/checkboxtoggleallevents/index.php
      4. Click on the 'Toggle-all' (parent) checkbox for "Checkbox Group 1" in order to select all checkboxes in Group 1.
      5. Open the console in the browser, the fired events should be captured in the console.

      Result:

      Actual: 7 events are being fired and captured in the console.

      Expected: 1 event should be fired with data which reflects the current state of the specific toggle group (ex. all 3 child checkboxes from the toggle group "participants-table option-1" are selected)

      Attachments

        1. checkboxtoggleallevents.zip
          8 kB
        2. Screenshot_1.png
          Screenshot_1.png
          111 kB
        3. Screenshot_2.png
          Screenshot_2.png
          167 kB
        4. Screenshot_3.png
          Screenshot_3.png
          158 kB
        5. Screenshot_4.png
          Screenshot_4.png
          129 kB

        Issue Links

          Activity

            People

              Geshoski Mihail Geshoski
              Geshoski Mihail Geshoski
              Peter Dias Peter Dias
              Sara Arjona (@sarjona) Sara Arjona (@sarjona)
              Janelle Barcega Janelle Barcega
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                14/Sep/20

                Time Tracking

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