Fixed Panels
animations not working on docs site
#2370
+6
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
I believe the animations were not working on the docs site because the examples were placed in a shadow DOM. Thus, calling
getElementById("…").scrollIntoView()
wouldn't work sincegetElementById()
would not return thePanel
that is in the shadow DOM. Exact code:iTwinUI/packages/itwinui-react/src/core/Panels/Panels.tsx
Line 87 in 78ae415
To fix it, this PR no longer uses the
ownerDocument
. Since the panels are always within thePanelsWrapper
, we can instead use search for thePanel
within the ref of the thePanelsWrapper
:For the selector, I didn't use
`#${newActiveId}`
since React'suseId()
gives ids starting with":"
that gives an error if used inquerySelector()
.Testing
Confirmed that the animations now work on the docs site.
Docs
Added a changeset. But since this issue might be rare, I could remove the changeset if any reviewer feels so.