Implement auto-scrolling to the selected component in the documentation on the first render/on a new tab.

[nikitaorliak-cengage]

Describe the bug
Need to implement auto-scrolling on the first render in the documentation to the selected component (id in the path).

To Reproduce
Steps to reproduce the behavior:

1. Open React-Magma;
2. Open any component on the Component tab;
3. Select any component from the On this page navigation;
4. Copy the new path;
5. Open a new browser tab with this path;
6. The user doesn't see the selected component, the page is at the beginning.

Expected behavior
The page automatically scrolls to the selected component. The user sees it.

Additional context
This can probably be solved as follows:

• Take id from the path -> find selected element -> use scrollIntoView;
• Take id from the path -> find selected element -> use getBoundingClientRect().top + window.scrollY;
  Note that not all components may be rendered the first time, so scrolling may work unexpectedly.

[silvalaura]

A few related bugs:

1

Component:
Docs site - sub nav

Description:
On a page with a long sub nav on the right side of the page, the Scroll Spy is behaving oddly as it tries to show where you are. This may be tied to it trying to center the current tab on the page, which shouldn't apply when you're at the top of the list.

Steps to reproduce:

1. Go to the Tabs page on the Docs site
2. When the page first loads, the sub nav is correct for about a second before it automatically scrolls down about 4-5 items
3. As you scroll down the page, you'll see the sub nav jump up and down as it tries to show you the current section it is on.

2

Component:
Select

Description of bug:
Broken links behavior in the docs;

Steps to reproduce link 1:

• Open the Select in the docs;
• Click the Custom Items example link;
• Different effect. Sometimes it works correctly and scrolls to Custom Items, sometimes not.

Steps to reproduce link 2:

• Open the Select in the docs;
• Navigate to Controlled;
• Click the State Changes link;
• Different effect. Sometimes it works correctly and scrolls to Custom Items, sometimes not.

Steps to reproduce link 3:

• Open the Select in the docs;
• Navigate to State Changes;
• Click the using your custom type link;
• Different effect. Sometimes it works correctly and scrolls to Custom Items, sometimes not.

Can it only be reproduced in dev or is it reproducible in the last released version?
Both