Checkbox and search support about react-arborist HOT 6 CLOSED

Hi @mooijtech thanks for the question. I think you can accomplish what you want by using the tree.selectById(id, true) method, and the state.isSelected parts of the NodeRenderer's state.

The tree instance is passed to the node renderer so you can use like so.

function NodeRenderer({data, state, tree}) {
  return ( 
     ... 
     <input type="checkbox" checked={state.isSelected} onClick={() => tree.selectById(data.id, true)} />
    ...
}

When I have more time, I'll put up an example of checkboxes on the demo site.

from react-arborist.

Hi James,

Finally got around to implementing this.
Using the Tree API works but doesn't allow shift-clicking to select everything between the first and last selected node (even when setting shift to true).

React wants to use the onChange event for checkboxes otherwise will show this console warning:
Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

I ended up fixing the shift-clicking by calling the handlers passed to the node renderer:

<input
  id="row"
  name="row"
  type="checkbox"
  checked={state.isSelected}
  onClick={handlers.select}
  onChange={() => {}}
/>

I also needed to listen for the selection change, can we expose an onSelect event?

from react-arborist.

I think defaultChecked will work for you case. And this seems like an okay workaround. I'm working on a version 2 that will clean this up.

from react-arborist.

Using defaultChecked will break keyboard up/down.
My onChange wasn't getting fired for keyboard events.
I just figured it out via facebook/react#13477

Edit: Actually it's still broken, my onChange won't fire.

from react-arborist.

I think I've found the root cause of the onChange not firing: facebook/react#13424

from react-arborist.

Closed as this is solved by react-arborist v2: #49 (comment)

from react-arborist.