Subrow unselect doesn't affect parent checkbox #3965

Activity

1. nelsonrds commented on May 25, 2022

   

   nelsonrds

   on May 25, 2022

   Last edited by nelsonrds

   More actions

   Hello Jony,

   You are building the parent Checkbox with the wrong properties. You have to differentiate the selected rows from the "parent" selected rows.

   So we have this:
   

   This image was taken from here: https://codesandbox.io/s/summer-lake-2qklsp?file=/src/App.js with the fix.

   Regards,
   Nelson.

   EDIT: This won't work if you add more rows, I just duplicated the toggle all rows selected props to the "parent" row:
   

   👎React with 👎2Reacted by Ilyes Reddah and Mark Wood
2. Jonyberry commented on May 26, 2022

   

   Jonyberry

   on May 26, 2022

   Author

   More actions

   Hi Nelson,

   thanks for quick answer!

   I updated my sandbox and also I added one more row. When I tried your fix my parent checkbox now selects all rows but it should select only subrows.

   Have you got any other idea how to fix it?
3. nelsonrds commented on May 26, 2022

   

   nelsonrds

   on May 26, 2022

   Last edited by nelsonrds

   More actions

   Hello Jony,
   To be honest, I think that there is something missing on the row property, something like row toggle all rows selected properties. This way you could toggle all properties from that specific row + his sub rows.

   

   Also, expanding + row selection is not properly connected and you cannot do what you are trying to do, maybe Tan can help us out here.

   Good luck Jony!

   👍React with 👍2Reacted by Honza Bártl and Talat Küyük
4. tannerlinsley commented on May 29, 2022

   

   tannerlinsley

   on May 29, 2022

   Member

   More actions

   Feel free to open a discussion or use the Discord for more help!
5. tannerlinsley

   closed this as completedon May 29, 2022
6. Jonyberry commented on May 30, 2022

   

   Jonyberry

   on May 30, 2022

   Author

   More actions

   Alright, I create discussion here
7. itsmejoeeey commented on Sep 4, 2023

   

   itsmejoeeey

   on Sep 4, 2023

   Last edited by itsmejoeeey

   Contributor

   More actions

   When following the reproduction steps, this same issue is visible in the "Expanding" CodeSandbox example from the guide.

   This issue seems to have the same/similar symptoms to these other issues: #4720 #4759 #4878 #4879

   This naive UI example here (cascade checking) has the behavior we are expecting:
   https://www.naiveui.com/en-US/os-theme/components/tree#cascade.vue

   Could you please advise if we are missing something @tannerlinsley?
8. itsmejoeeey commented on Sep 15, 2023

   

   itsmejoeeey

   on Sep 15, 2023

   Contributor

   More actions

   See my comment on the above linked discussion that outlines a way I managed to implement this sort of "cascading" behaviour.
9. VincEnterprise commented on Dec 21, 2023

   

   VincEnterprise

   on Dec 21, 2023

   Last edited by VincEnterprise

   More actions

   bump. I'm still waiting for a row selection that is leaf node only and cascading with proper indeterminate state for parent rows.

   It seems alot of people expect this behavior:

   #4298
   #4349
   #4720
   #4759
   #4878
   #4879
   https://github.com/trimble-oss/modus-web-components/issues/1672
10. R-Bower commented on Jan 27, 2024

    

    R-Bower

    on Jan 27, 2024

    Last edited by R-Bower

    More actions

    I've fixed this in a local fork. The issue stems from row selection functioning independently of parent row selection. In other words, the current implementation allows a parent row to be selected independently of its child rows. This doesn't align with what I expect from nested checkbox behavior, namely:

    • When all children are selected, the parent should be selected.
    • When only some children are selected, the parent should be indeterminate.
    • When no children are selected, the parent should be unselected.

    The fixes below pertain to the RowSelection.ts feature.

    row.toggleSelected = (value, opts) => {
      const isSelected = row.getIsSelected()
    
      table.setRowSelection((old) => {
        value = typeof value !== "undefined" ? value : !isSelected
    
        if (row.getCanSelect() && isSelected === value) {
          return old
        }
    
        const selectedRowIds = {...old}
    
        mutateRowIsSelected(
          selectedRowIds,
          row.id,
          value,
          opts?.selectChildren ?? true,
          table,
        )
        // could also be enabled through a new config option.
        return syncParentRowSelection(row, selectedRowIds, table)
      })
    }

    /**
     * When child rows are updated, the parent state is not properly synced.
     * Assumptions:
     * When all children are selected, the parent should be selected.
     * When only some children are selected, the parent should be indeterminate.
     * When no children are selected, the parent should be unselected.
     */
    function syncParentRowSelection<TData extends RowData>(
      row: Row<TData>,
      selection: RowSelectionState,
      table: Table<TData>,
    ): RowSelectionState {
      const parentRow = row.getParentRow()
      if (!parentRow) {
        return selection
      }
    
      const selected = isRowSelected(parentRow, selection)
      const isAllSubRowsSelected =
        isSubRowSelected(parentRow, selection, table) === "all"
    
      if (isAllSubRowsSelected && !selected) {
        mutateRowIsSelected(selection, parentRow.id, true, false, table)
      } else if (!isAllSubRowsSelected && selected) {
        mutateRowIsSelected(selection, parentRow.id, false, false, table)
      }
    
      return syncParentRowSelection(parentRow, selection, table)
    }

    🎉React with 🎉1Reacted by Ryan