onSetActive, onSetInactive callbacks firing incorrectly or not at all

If I omit containerId prop on Link component and let default document scroll container I get incorrectly highlighted navbar item (previous item is still highlighted).

If I pass id of the div that has scroll to Link then onSetActive, onSetInactive callbacks aren’t firing at all.

Also if I specify offset prop, scrolling position is correct but highlighted navitem is incorrect (onSetActive, onSetInactive callbacks).

I tried setting a breakpoint at i.e.

webpack:///node_modules/react-scroll/modules/mixins/scroll-link.js

line 264 _this2.props.onSetInactive && _this2.props.onSetInactive(to, element);

and it’s not pausing at all. I tried investigating stack trace when container is document and it does pause in debugger but I can just see handlers array gets invoked and before that mount is called, it’s not much informative, I expected some conditions and then to see which one from them isn’t fulfilled.

To summarize:

onSetActive, onSetInactive callbacks aren’t firing at all when containerId is passed, or firing incorrectly when containerId is omitted or offset prop is being used.

Is this a bug, and is there a workaround for this? Can you give me advice what’s the best way to debug this?

Also I noticed container: PropTypes.object, isn’t supported in types in "@types/react-scroll": "^1.8.2",:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-scroll/modules/components/Link.d.ts

[fisshy]

@therealdrtroll Your problem is the .active css

.active {
  color: white;
  background-color: red;
  /*padding: 6px 5px;*/
  border-radius: 8px;
}

First you click the link, then it calculate the position of the element, but once active class hits a Link, then the actual element gets pushed a few pixels below the actual scroll position.

Add the padding to your links from start or remove the padding from .active

[fisshy]

@therealdrtroll Glad I could help 😃