STCOM-1372 Use mutationobserver for focus management in repeatable field #2376
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
vashjs
reviewed
Oct 25, 2024
…on, specifically.
|
github-actions bot
pushed a commit
that referenced
this pull request
Oct 28, 2024
…eld (#2376) * use mutationobserver for focusmanagement in repeatable field * cleanup RFContent, mild refactor, check for RF-items addition, deletion, specifically. * use state to check if the user has interacted with the repeatableField * add comments for conditionals * Update CHANGELOG.md
zburke
pushed a commit
that referenced
this pull request
Oct 31, 2024
…eld (#2376) * use mutationobserver for focusmanagement in repeatable field * cleanup RFContent, mild refactor, check for RF-items addition, deletion, specifically. * use state to check if the user has interacted with the repeatableField * add comments for conditionals * Update CHANGELOG.md (cherry picked from commit d7e23fb)
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 is cited in a hanful of issues.... STCOM-1372 is the first. This solution uses a useEffect/MutationObserver combination for focus management in repeatable field.
Since state for RepeatableField is kept outside of the component, DOM state is the main way we have to control this behavior at the component level.
Pseudo-logic for this is as follows:
Manage focus only if the user has already interacted with the list (via
onFocushandler)When an item is added, move focus to the first focusable element within that item.
If items are removed from the list, focus the first focusable element within the item's previous sibling.