Search Example?

[sikandarchishty]

A code sandbox for search with this version?

[nosferatu500]

Just like in the original.

[michal-radziwilko]

@nosferatu500 Could you confirm that the example "search.js" from original works? I've tried it and there seems to be some problem. Is seem that when the match is found the css classes for searchMatch and searchFocus aren't added to the appropriate nodes and the view isn't scrolling to the found node. It doesn't behave like in your search demo. Thank in advance :)

[bmiller-endertech]

@michal-radziwilko, regarding:

@nosferatu500 Could you confirm that the example "search.js" from original works? I've tried it and there seems to be some problem. Is seem that when the match is found the css classes for searchMatch and searchFocus aren't added to the appropriate nodes and the view isn't scrolling to the found node. It doesn't behave like in your search demo. Thank in advance :)

This had me stumped for a couple days. There's some sort of issue with react-dom and the ReactSortableTree class's state. This is an old issue from the previous version (frontend-collective's version). See this: https://github.com/frontend-collective/react-sortable-tree/issues/497 I was able to resolve by removing <React.StrictMode> from wrapping around my <App /> in index.tsx. Also, apparently this doesn't happen in production mode.

[richardoptibrium]

I'm having this issue too, exactly as described and I wasted a lot of time trying to debug and hack a solution. I'm glad I found this thread, but can anything be done so we can reinstate and not chase ghosts please? Otherwise love the react-sortable-tree though docs could be improved and could do with more sandboxed examples too.

[tianzhich]

I've found the reason. Because in react strict mode, it will trigger getDerivedStateFromProps twice to help you spot side effects.

Below is the code in the Tree component's getDerivedStateFromProps lifecycle. The instanceProps derived from prevState shouldn't be mutated(which trigger the side effect). I will init a PR to solve this.

static getDerivedStateFromProps(nextProps, prevState) {
    const { instanceProps } = prevState
    const newState = {}

    const isTreeDataEqual = isEqual(instanceProps.treeData, nextProps.treeData)

    // make sure we have the most recent version of treeData
    instanceProps.treeData = nextProps.treeData

    if (!isTreeDataEqual) {
      if (instanceProps.ignoreOneTreeUpdate) {
        instanceProps.ignoreOneTreeUpdate = false
      } else {
        newState.searchFocusTreeIndex = undefined
        ReactSortableTree.loadLazyChildren(nextProps, prevState)
        Object.assign(
          newState,
          ReactSortableTree.search(nextProps, prevState, false, false, false)
        )
      }

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

    instanceProps.searchQuery = nextProps.searchQuery
    instanceProps.searchFocusOffset = nextProps.searchFocusOffset
    newState.instanceProps = { ...instanceProps, ...newState.instanceProps }

    return newState
  }

[tianzhich]

I just init a PR. Could you review it when you free? @nosferatu500

By the way I'm refactoring the Tree component in my project recently and i would like to maintain this library with you together🙂

[nosferatu500]

Thank you! I'll review everything on Monday.