Ensure Tab order stays consistent, and the currently active Tab stays active
#1837
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobinMalfait
force-pushed
the
fix/issue-1834
branch
from
169e9c8
to
e58dd3c
Compare
This ensures that whenever you insert or delete tabs before the current tab, that the current tab stays active with the proper panel. To do this we had to start rendering the non-visible panels as well, but we used the `Hidden` component already which is position fixed and completely hidden so this should not break layouts where using flexbox or grid.
RobinMalfait
force-pushed
the
fix/issue-1834
branch
from
e58dd3c
to
9992f09
Compare
|
Hello @RobinMalfait my team is also encountering this issue, is there any plan for this to be released into a new version soon? |
|
@elco45 This should be fixed, and will be available in the next release. You can already try it using:
|
|
@RobinMalfait tried it out and that fixed the issue for us! Will be patiently waiting for the next release! Thanks |
RobinMalfait
added a commit
that referenced
this pull request
Sep 12, 2022
This was necessary to ensure the `Panel` and the `Tab` were properly connected with eachother because it could happen that the `Tab` renders but the corresponding `Panel` is not the active one which means that it didn't have a DOM node and no `id` attached. Whenever new `Tab` became active, it rerendered but the `Panel` wasn't available yet, after that the `Panel` rendered and an `id` was available but the actual `Tab` was already rendered so there was no link between them. We then forced a re-render because now the `Panel` does have a DOM node ref attached and the `aria-labelledby` could be filled in. However, in #1837 we fixed an issue where the order of `Tab` elements with their corresponding `Panel` elements weren't always correct. To fix this we ensured that the `Panel` always rendered a `<Hidden />` component which means that a DOM node is always available. This now means that we can get rid of the `forceRerender`.
RobinMalfait
added a commit
that referenced
this pull request
Sep 12, 2022
* remove `forceRerender` code This was necessary to ensure the `Panel` and the `Tab` were properly connected with eachother because it could happen that the `Tab` renders but the corresponding `Panel` is not the active one which means that it didn't have a DOM node and no `id` attached. Whenever new `Tab` became active, it rerendered but the `Panel` wasn't available yet, after that the `Panel` rendered and an `id` was available but the actual `Tab` was already rendered so there was no link between them. We then forced a re-render because now the `Panel` does have a DOM node ref attached and the `aria-labelledby` could be filled in. However, in #1837 we fixed an issue where the order of `Tab` elements with their corresponding `Panel` elements weren't always correct. To fix this we ensured that the `Panel` always rendered a `<Hidden />` component which means that a DOM node is always available. This now means that we can get rid of the `forceRerender`. * update changelog
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This ensures that whenever you insert or delete tabs before the current
tab, that the current tab stays active with the proper panel.
To do this we had to start rendering the non-visible panels as well, but
we used the
Hiddencomponent already which is position fixed andcompletely hidden so this should not break layouts where using flexbox
or grid.
Fixes: #1834