Animation error

[serverlesspolska]

Reporting a Bug

After adding search functionality (copied from the example) when I search for an item I get following error.

requestAnimationTimeout.js?ab56:34 Uncaught TypeError: Illegal invocation
at Object.requestAnimationTimeout (requestAnimationTimeout.js?ab56:34)
at Grid._debounceScrollEnded (Grid.js?0f6f:884)
at Grid.handleScrollEvent (Grid.js?0f6f:212)
at Grid._this._onScroll (Grid.js?0f6f:133)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js?8875:69)
at executeDispatch (EventPluginUtils.js?5685:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js?5685:108)
at executeDispatchesAndRelease (EventPluginHub.js?3c44:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js?3c44:54)
at Array.forEach ()
requestAnimationTimeout @ requestAnimationTimeout.js?ab56:34
_debounceScrollEnded @ Grid.js?0f6f:884
handleScrollEvent @ Grid.js?0f6f:212
Grid._this._onScroll @ Grid.js?0f6f:133
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js?8875:69
executeDispatch @ EventPluginUtils.js?5685:85
executeDispatchesInOrder @ EventPluginUtils.js?5685:108
executeDispatchesAndRelease @ EventPluginHub.js?3c44:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js?3c44:54
forEachAccumulated @ forEachAccumulated.js?2859:24
processEventQueue @ EventPluginHub.js?3c44:254
runEventQueueInBatch @ ReactEventEmitterMixin.js?9870:17
handleTopLevel @ ReactEventEmitterMixin.js?9870:27
handleTopLevelImpl @ ReactEventListener.js?e4aa:72
perform @ Transaction.js?91bc:143
batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
batchedUpdates @ ReactUpdates.js?be0d:97
dispatchEvent @ ReactEventListener.js?e4aa:147

Apart from an error on a console, top and bottom of the tree is hidden on the webpage.
(search is working ok, items are found)

Does anyone have an idea what causes that and how to solve it?

[fritz-c]

Can you reproduce this by forking the sandbox example?
https://codesandbox.io/s/wkxvy3z15w

[serverlesspolska]

Hi @fritz-c

Thanks for the answer.

I will try to reproduce that error.However, right now, I'm not able to reproduce the error.

As I don't want to copy over a lot of my code into sandbox I will need some more time.

BTW: This requestAnimationTimeout.js is a part of react-virtualized which is a dependency of react-sortable-tree

 -- react-sortable-tree@1.5.4
     -- react-virtualized@9.16.1

/**
 * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded.
 * When the delay time has been reached the function you're timing out will be called.
 *
 * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js)
 */
export var requestAnimationTimeout = function requestAnimationTimeout(callback, delay) {
  var start = Date.now();

  var timeout = function timeout() {
    if (Date.now() - start >= delay) {
      callback.call();
    } else {
      frame.id = raf(timeout);
    }
  };

  var frame = {
    id: raf(timeout)
  };

  return frame;
};

[arminmaurice1990]

Having the exact same issue right now, wit the exact same results as above

"Uncaught TypeError: Illegal invocation"

`export var requestAnimationTimeout = function requestAnimationTimeout(callback, delay) {
  var start = Date.now();

  var timeout = function timeout() {
    if (Date.now() - start >= delay) {
      callback.call();
    } else {
      frame.id = raf(timeout);
    }
  };

  var frame = {
    id: raf(timeout)
  };

  return frame;
};`

with line id: raf(timeout) underlined as the issue.