Limiting table selects not working - material UI table - react

Question

Im prob missing the easy answer here. Right now I have a ternary on my table. If the selected array length is greater than a number, render a table with checkbox disabled. I also hook in a different handleClick function for the table with the disabled checkbox that only will deselect. This essentially turns the checkboxes gray(disables them) and allows the user to uncheck so they can get the table back. The problem is if they click to select something that wasn't already checked(disabled at this point), it removes all the selected checks and enables the table for selection again. Which is an issue because the underlying data has not been removed actually from a realtime database i am using.

So I've recreated this issue on code sandbox. (may take a second to load)

1. Select 2 (that should disable the table)
2. Then select any unselectedcheckbox, it will remove all the disabled checks and reenable the table for selection.

https://codesandbox.io/s/yw8zl6oqk9

Basically I want stop the user at a given number of selects. And I only want the user to be able to unselect the currently selected items. I really don't think this is the best approach. Id rather keep the checks color enabled and just stop the user at 3 (any number). I've tried some other approaches in the handleClick function if it was greater than say 3 but it left the user with table they could not uncheck or check at that point. Please let me know if you have any idea how to solve this problem. Thank you!

I was asked for a clearer used case so here goes.

• User can only select 2 in the List

• Once the user has selected 2 they can no longer select any other items

• User can deselect one or more selected and then select up to 2 different items again

• User can keep selecting up 2 items only and deselecting to restore select-ability as long as they like

The issue im having with this use case is the when the user has selected 2, selectability is supposed to be disabled, when an item that is not selected is selected, it deselects the 2 items that were selected. The sandbox I posted reflects the problem.

Answer 1

I figured out the solution that works best for my use case. I didn't need a ternary. I didn't need a second onclick function to handle for just the deselect only. That was causing a problem because when a user would select a row that was already selected, the selected index returned was -1 which I wasn't handling in the handleRemoveOnly function. I didn't think I needed too. Either way, I have a much more elegant solution now.

One onclick and extra if on the '-1' for unselected rows. No need to disable the table with ternary like I was doing. This works better for my use case.

Here is a the new onclick function

   handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];

if (selectedIndex === -1 && selected.length > 1) {
  console.log("hc0::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(selected));
} else if (selectedIndex === -1) {
  console.log("hc1::", selectedIndex);
  newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
  console.log("hc2::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
  console.log("hc3::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
  console.log("hc4::", selectedIndex);
  newSelected = newSelected.concat(
    selected.slice(0, selectedIndex),
    selected.slice(selectedIndex + 1)
  );
}

Here are the code sandboxs

bad sandbox: https://codesandbox.io/s/yw8zl6oqk9

fixed sandbox: https://codesandbox.io/s/m4vk5w20lx

Hope this helps someone.