JavaScript

So i am using this package “react-checkbox-tree” to make a checkbox, but since this is made on classes components and i need to do it with functions and hooks, this is being a bit tricky to my actual skills.

//Checkbox Tree
  const [checkedTree, setCheckedTree] = useState([]);
  const [expandedTree, setExpandedTree] = useState(["1"]);
  const [filterText, setFilterText] = useState("");
  const [nodesFiltered, setNodesFiltered] = useState();

  ///FILTER LOGIC /////
  const onFilterChange = (e) => {
    setFilterText(e.target.value);
    if (e.target.value) {
      filterTree();
    }
  };

  const filterTree = () => {
    // Reset nodes back to unfiltered state
    if (!filterText || filterText === "" || filterText.length === 0) {
      setNodesFiltered(nodes);
      return;
    }

    const nodesFiltered = (nodes) => {
      return nodes.reduce(filterNodes, []);
    };

    setNodesFiltered(nodesFiltered);
  };

  const filterNodes = (filtered, node) => {
    const children = (node.children || []).reduce(filterNodes, []);
    if (
      // Node's label matches the search string
      node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) >
        -1 ||
      // Or a children has a matching node
      children.length
    ) {
      filtered.push({ ...node, ...(children.length && { children }) });
    }
    return filtered;
  };
  //

My first problem is that when i search for the parent, i only get the last children of the array for some reason.
The Second is that when i use the backspace button, the filter stops working until i clean every char.

I made a codesandbox to help you guys to understand the problems: https://codesandbox.io/s/checkboxtree-6gu60

This is the example on with classes: https://github.com/jakezatecky/react-checkbox-tree/blob/master/examples/src/js/FilterExample.js

Tks in advance!

Answer

For your second problem, I solved it by passing through onKeyDown as well as onChange from my search input:

<input
  type="text"
  onChange={onFilterChange}
  onKeyDown={onBackspace}
/>

which calls

// If the user deletes the search terms, reset to unfiltered
const onBackspace = e => {
  var key = e.keyCode || e.charCode

  // magic numbers are backspace and delete. Naming them didn't work.
  if (key == 8 || key == 46) {
    setFilterText("")
    filterTree()
  }
}

React – CheckboxTree filter

Advertisement

Answer