Render prefetch links in Portal #1710
Closed
DylanVann
started this conversation in
Ideas + Feature Requests
Replies: 1 comment
-
I think this can be solved with just a wrapper div around We can't use |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
It might be a good idea to render
<Link>
's<link>
s in a Portal.Under certain conditions the
Link
component will render after itself a collection oflink
elements to preload the linked route, like so:I initially encountered issues with this when using the Dialog from Radix UI. The addition and removal of these elements in the dialog on focusing (using the keyoard) due to the
intent="prefetch"
behaviour breaks Radix keeping track of focusable elements in the Dialog, so you end up not being able to focus on certain elements.Reproduction here: https://stackblitz.com/edit/remix-run-remix-iajhvs?file=app%2Froutes%2F_index.tsx
I did find that React Aria does not suffer from this issue so I considered this to be a bug in Radix.
Later on working on the same project though I came across another interesting bug:
prefetch-issue.mp4
In this case the CSS uses
nth-child
to add padding to the left of the text on the first column of a grid, but not on other columns. What's happening here though is that the insertion and removal oflink
elements on triggering the prefetch behaviour is causing thatnth-child
style to not match the right elements.Both of these bugs could be eliminated by having the
Link
element renderlink
s into a Portal in the document body, instead of beside theLink
.Beta Was this translation helpful? Give feedback.
All reactions