Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't cascade down during serialization process #351

Open
ZhangHanwen96 opened this issue May 23, 2022 · 1 comment
Open

Doesn't cascade down during serialization process #351

ZhangHanwen96 opened this issue May 23, 2022 · 1 comment

Comments

@ZhangHanwen96
Copy link

Describe the bug
The root checkbox won't be fully checked if it is in [checked] list .

Reproduction steps
If i were to put 'mars' in checked list, instead of get fully checked state , it is not checked at all.

  • Current

image

const nodes = [
  {
    value: "mars",
    label: "Mars",
    children: [
      { value: "phobos", label: "Phobos" },
      { value: "deimos", label: "Deimos" },
      {
        value: "mars-1",
        label: "Mars",
        children: [
          { value: "phobos-1", label: "Phobos" },
          { value: "deimos-1", label: "Deimos" }
        ]
      }
    ]
  }
];

class Widget extends React.Component {
  state = {
    checked: ["mars"],
    expanded: []
  };

  render() {
    return (
      <>
        <CheckboxTree
          nodes={nodes}
          checked={this.state.checked}
          expanded={this.state.expanded}
          onCheck={(checked) => this.setState({ checked })}
          onExpand={(expanded) => this.setState({ expanded })}
        />
        <div>{JSON.stringify(this.state.checked)}</div>
      </>
    );
  }
}

Expected behavior
image

My solution

// [file]: NodeModel.js
 // Deserialize values and set their nodes to true
        listKeys.forEach((listKey) => {
            lists[listKey].forEach((value) => {
                if (this.flatNodes[value] !== undefined) {
                    this.flatNodes[value][listKey] = true;
                }
                if(listKey === 'checked') {
                    const {noCascade, checkModel} = this.props;
// !!!! ----- add cascade down process here -----
                    this.flatNodes[value].children.forEach((child) => {
                        this.toggleChecked(child, true, checkModel, noCascade, false);
                    });
                }
            });
        });
@jakezatecky
Copy link
Owner

Thanks for the report.

Unfortunately, this is because the default checkbox model only tracks leaf nodes in the checked array. Any parent nodes are effectively ignored. It would make sense to allow the render cascade selections, potentially like how your solution works, but that could cause weird situations when unchecking the child of a checked parent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants