question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parent nodes with empty array as children are checked by default

See original GitHub issue

Describe the bug Now that the children property can be an empty array, when the tree renders, if a parent node has an empty array as children then it is rendered as a checked node by default and cannot be unchecked. The issue probably has to do with isEveryChildChecked function, as it will return true if the array provided is empty.

Reproduction steps Having modified the below example to have a node that has no children (eg Neptune), in version 1.5.1, the node renders as an unchecked node with no option to expand it since there are no children to show. In version 1.6.0 however, the node renders as a checked node with the arrow on the left to expand it, even though there are no children to show. In addition, when you try to uncheck it that doesn’t work.

Link to codesandbox example

import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';

const nodes = [{
  value: 'mars',
  label: 'Mars',
  children: [
    { value: 'phobos', label: 'Phobos' },
    { value: 'deimos', label: 'Deimos' },
  ],
},
{
  value: 'neptune',
  label: 'Neptune',
  children: [],
}];

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

  onCheck = (checked) => {
    this.setState({ checked });
  };

  onExpand = (expanded) => {
    this.setState({ expanded });
  };

  render() {
    const { checked, expanded } = this.state;

    return (
      <CheckboxTree
        nodes={nodes}
        checked={checked}
        expanded={expanded}
        onCheck={this.onCheck}
        onExpand={this.onExpand}
      />
    );
  }
}

export default Widget;

Expected behavior The expected behaviour would be to render the parent component unchecked by default when there is an empty array provided as children.

Screenshots Version 1.6.0 result - Parent node renders as checked by default if there are no children (current behaviour) Screenshot 2021-03-05 at 09 41 20

Version 1.5.1 result - Parent node renders as unchecked by default with no option to expand it (expected behaviour) Screenshot 2021-03-05 at 09 41 31

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
vandangocommented, May 5, 2021

Can this ticket please get an fast update or priority improvement, maybe as a solution for 1.6.1? We use the checkbox tree for a lazy loading file tree with reload of folders open expand. Because of that we have to use empty arrays inside the new item: { value: item.value, label: item.label, children: [], }

1reaction
jakezateckycommented, Aug 30, 2021

Implemented a fix in 4f69c32075e8261d5df97b41d1604af40198c03c. I recognize the use case of lazy-loading child nodes and where it would be valuable to show the expand icon and load children after it has been toggled.

For context, in v1.5.1, a node with an empty children array was treated like a leaf. I did not recreate that behavior here. In this recent change, it is treated as a parent but without children. Thus, it will render the expand/collapse icons. It now defaults to unchecked, as it no longer relies on Array.isEvery (which would always return true when using an empty array).

This will also allow you to toggle the check state of an empty parent node. However, please note that if you add children after checking a parent node (such as through the onExpand handler), it is up to you to either remove that node value from the checked array or expand checked to include all new children. This component will be unable to automatically apply checked status to children added after the fact.

@nikhil377 No timeline for a release date yet. I have a bit of breathing room this week, so I intend to quash a few issues in the coming days. If you desire this change now, you are welcome to point your package.json to the specific commit (4f69c32075e8261d5df97b41d1604af40198c03c).

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add empty children array for the empty parents?
I have a JSON populated output. Wherever the children are not available the children index is missing. [7] => Array ( [id] =>...
Read more >
React Children And Iteration Methods - Smashing Magazine
While iterating, if a child node is a string or a number, it pushes the value as is in the accumulator array. If...
Read more >
Control tree node appearance and behavior - MATLAB
Tree nodes are the items listed in a tree hierarchy. ... empty GraphicsPlaceholder array (default) | ContextMenu object ... Parent/Child. expand all ...
Read more >
Node - Slate
A list of child nodes. Defaults to a list with a single text node child. ... Get the closest void parent of a...
Read more >
NodeList - Web APIs | MDN
Chrome Edge Fir... NodeList Full support. Chrome1. Toggle history Full support. Edge12. Toggle history Fu... @@iterator Full support. Chrome51. Toggle history Full support. Edge79. Toggle...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found