searchMatches are never updated

[jorgecuesta]

I'm copy the example from here and can't get the search focus/highlight working.

I debug the code and see that getDerivedStateFromProps is called a first time ( after pass the searchQuery={text} ) and it does .search() and return the searchMatches, but it is called again and in this second time it just returns the instanceProps and the prevState that came in this second time has the searchMatches empty.

I have the same dependencies like the sandbox, react/react-dom 16.9.0-alpha-0 and I also try with the previous one 16.8.6 but can't get it working.

I also literally copy the codesandbox.io code and put in in the main of my app, but it didn't work.

I can't reproduce or debug the state/error in https://codesandbox.io

If someone could give some idea or point me in some direction to understand this I will really appreciate it.

[jorgecuesta]

Here is an screenshot were u can see that first it does not have the searchQuery and when it receive it update, call the getDerivedStateFromProps and return results but it came again and just return instanceProps without searchMates and the state that came to the second call does not came with the previous one returned.

[jorgecuesta]

I fix the problem moving the logic from getDerivedStateFromProps to componentDidUpdate like React suggests, but I don't test other features that maybe could be broken.

componentDidUpdate(prevProps, prevState) {
  const instanceProps = {...prevState.instanceProps};
    const newState = { ...this.state };
    const isTreeDataEqual = isEqual(instanceProps.treeData, this.props.treeData); // make sure we have the most recent version of treeData

    // if it is not the same then call the onDragStateChanged
    if (this.state.dragging !== prevState.dragging) {
      if (this.props.onDragStateChanged) {
        this.props.onDragStateChanged({
          isDragging: this.state.dragging,
          draggedNode: this.state.draggedNode,
        });
      }
    }

    instanceProps.treeData = this.props.treeData;

    if (!isTreeDataEqual) {
      if (instanceProps.ignoreOneTreeUpdate) {
        instanceProps.ignoreOneTreeUpdate = false;
      } else {
        newState.searchFocusTreeIndex = null;
        ReactSortableTree.loadLazyChildren(this.props, prevState);
        Object.assign(newState, ReactSortableTree.search(this.props, prevState, false, false, false));
      }

      newState.draggingTreeData = null;
      newState.draggedNode = null;
      newState.draggedMinimumTreeIndex = null;
      newState.draggedDepth = null;
      newState.dragging = false;
    } else if (!isEqual(instanceProps.searchQuery, this.props.searchQuery)) {
      Object.assign(newState, ReactSortableTree.search(this.props, prevState, true, true, false));
    } else if (instanceProps.searchFocusOffset !== this.props.searchFocusOffset) {
      Object.assign(newState, ReactSortableTree.search(this.props, prevState, true, true, true));
    }

    instanceProps.searchQuery = this.props.searchQuery;
    instanceProps.searchFocusOffset = this.props.searchFocusOffset;
    newState.instanceProps = instanceProps;

    if (isEqual(newState, prevState)) return;

    this.setState(newState); // eslint-disable-line
}

[rhoffmann8]

Out of curiosity, were you using this within a create-react-app running in development mode?

I also ran into this issue when using this library in an application bootstrapped via create-react-app, and I believe the double call to getDerivedStateFromProps is a symptom of StrictMode: facebook/react#15074 (comment). After running a production build and serving the application, the issue disappeared.

[dherincx92]

@rhoffmann8 , Oh my goodness! I cannot believe this was the issue. For others that are still actively using this library, downgrading to the previous version of react-sortable-tree allowed us to use StrictMode and have searchQuery working for some odd reason, but definitely removing StrictMode from my app solved the problem for me!

[tianzhich]

I fixed it in this fork nosferatu500#32. For someone who wish to use this library you can use it instead.