Checkbox and search support

[mooijtech]

Hello,

I would like to replace react-dropdown-tree-select with this library.
Would it be possible to add functionality where you can checkbox folders and search for folders?

[jameskerr]

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.

[mooijtech]

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?

[jameskerr]

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.

[mooijtech]

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.

[mooijtech]

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

[mooijtech]

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

[ns-kutsav]

@mooijtech can you please share the code for the demo you added for using checkboxes?