react-component / react-component/tree

Need to use custom checkbox but still use the 'out of the box' checking /cascading behavior

Open
#380 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
490
Avg merge
3d 17h
Merged PRs (30d)
5

Description

hey guys I have a custom checkbox set up but when i click it it doesn't mark its children as 'selected = true' automatically:

 <Tree      
              //showIcon={false}
              //showLine={false}
              switcherIcon={switcherIcon}
              checkable
              onExpand={this.onExpand}
              expandedKeys={expandedKeys}
              autoExpandParent={autoExpandParent}
              onCheck={this.onCheck}
              checkedKeys={this.state.checkedKeys}
              onSelect={this.onSelect}
              selectedKeys={this.state.selectedKeys}
              filterTreeNode={this.filterTreeNode}
            >
              {loop(this.props.data)}
            </Tree>


const loop = data =>
      data.map(item => {
        if (this.filterKeys && this.filterFn(item.key)) {
          this.filterKeys.push(item.key)
        }
        if (item.children) {
          return (
            <TreeNode  checkable={false} icon={Icon} style={{fontSize: 16, fontFamily: defaultFont.fontFamily}} key={item.key} title={item.title} disableCheckbox={item.key === 'mydisabledkey'}>
              {loop(item.children)}
            </TreeNode>
          )
        }
        return <TreeNode checkable={false} icon={Icon} style={{fontSize: 16, fontFamily: defaultFont.fontFamily}} key={item.key} title={item.title} />
      })


const Icon = ({ selected }) => {
      return selected? <Checked></Checked> : <Unchecked></Unchecked>
     }

After I check a parent, i inspect the object and observe that the item i checked has a property of 'selected = true', however, all of its children have a property of 'selected = false'. I would expect them to have selected = true

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Tree component's checkable and onCheck behavior, then compare checkedKeys with the custom Icon's selected prop and the TreeNode settings shown. Reproduce selecting a parent with the provided data and inspect how child state is represented; done means the expected cascading behavior is confirmed or a narrowly scoped correction is identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.