MandarinConLaBarba / react-tree-menu

A stateless tree menu component for React.
http://mandarinconlabarba.github.io/react-tree-menu/example/index.html
MIT License
170 stars 51 forks source link

Checkbox not checking in stateful mode when clicking on the checkbox but will when clicking on the label. #26

Open Steague opened 8 years ago

Steague commented 8 years ago

I am using stateful mode with my tree coming from a data prop and when I click on the label of a tree node the checkbox associated with it correctly checks and unchecks properly.

When I click on the checkbox itself, the sub-nodes check themselves correctly but the checkbox associated with the node I clicked does not become checked.

Here is my treeMenu

<TreeMenu
    identifier={"id"}
    collapsible={true}
    stateful={true}
    expandIconClass="glyphicon glyphicon-menu-right"
    collapseIconClass="glyphicon glyphicon-menu-down"
    data={data}
    onTreeNodeClick={this.setLastActionState.bind(this, "clicked")} />

Here is my data:

var data = {
    "Show in-plan only": {
        checkbox: true,
        id: "in-plan"
    },
    "Media Type": {
        checkbox: true,
        collapsed: true,
        id: "all-media",
        children: {
            "Third Level Nest Option 1": {
                checkbox : true,
                id: "media-id-1"
            },
            "Third Level Nest Option 2": {
                checkbox : true,
                id: "media-id-2"
            }
        }
    },
    "Status": {
        checkbox: true,
        collapsed: true,
        id: "all-statuses",
        children: {
            "Third Level Nest Option 1": {
                checkbox : true,
                id: "status-id-1"
            },
            "Third Level Nest Option 2": {
                checkbox : true,
                id: "status-id-2"
            }
        }
    }
}

screen shot 2016-05-20 at 9 36 47 am screen shot 2016-05-20 at 9 37 02 am

MandarinConLaBarba commented 8 years ago

Hmm, appears to work fine on the example (http://mandarinconlabarba.github.io/react-tree-menu/example/index.html). Looking at the code I can't see why this would happen...however if you can determine what is causing the problem I can take a look. Difficult for me to tell exactly just from looking at portions of your local setup.

Steague commented 8 years ago

Looking at the react debug window I do indeed see the checked parameter changing from false to true and vise versa when clicking the checkbox proper. Continuing to investigate in case it is just a visual bug with my browser.