carbon
carbon copied to clipboard
Sage
AnchorNavigation: throwing an error when window resized and scrolled
Current behaviour
When a window containing AnchorNavigation is resized down and then scrolled, it often throws an error. After closing the error, the navigation then no longer works (it seems disconnected to the sections attached to it). We have also noticed this occuring in our actual product, after making some updates to a page that uses it. Some sandbox examples seem fine - for example is only text is included in the sections.
Initial:
Scroll down:
Expected behaviour
Scrolling a page with AnchorNavigation doesn't throw an error.
CodeSandbox or Storybook URL
https://codesandbox.io/s/prod-water-g2p688
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
119.11.0
Design Tokens Version
No response
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@alex-j-clark I think you've attached the wrong codesandbox to this issue. Would you mind updating it so we can take a look? Thank you
Ah apologies, I had several open at the same time. I've updated with the correct link now.
Hi @alex-j-clark we're having a little trouble reproducing this issue, would you mind giving us some more info on it or a video so we can investigate this please?
Apologies, I've been off for most of the last 2 weeks and was only back in yesterday. Damien Robson has just posted a video in your Slack channel which should help.
Video demonstrating the issue sent from Slack. Attached to JIRA issue
I was finally able to reproduce this when investigating another question raised about this component (see link above), using this sandbox: https://codesandbox.io/s/fast-leftpad-klxj8p?file=/src/index.js
I only saw it the first time I made the sandbox though - on subsequent refresh it worked fine? May be to do with the nested object structure of the refs (but then the sandbox linked in the issue I'm commenting on doesn't have that)?
@alex-j-clark I just noticed while looking at this again that you have used React.createRef() to create the refs. It is not correct to do this in a function component, and you should use useRef instead. See for example this Stack Overflow thread for an explanation of the difference.
While even with your incorrect code I am unable to reproduce the issue, it wouldn't surprise me if it causes problems. Can you confirm whether fixing it to use useRef instead fixes the problem for you?
@robinzigmond thanks, I can confirm that useRef fixes the problem. @alex-j-clark you can close this issue now - I've fixed it in our Carbon upgrade PR 👍
