fix(modal): no longer loses focus trap after clicking inside the component. #6434
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
github-actions
bot
added
the
bug
anveshmekala
commented
Feb 8, 2023
| @@ -734,4 +734,48 @@ describe("calcite-popover", () => { | |||
| shadowFocusTargetSelector: `.${CSS.closeButton}` | |||
| })); | |||
| }); | |||
|
|
|||
| // refer to https://github.com/Esri/calcite-components/issues/5993 for context | |||
There was a problem hiding this comment.
added this to provide context.
There was a problem hiding this comment.
Nice! WDYT about moving the comment inside the test, so if for whatever reason it's modified or moved, it goes with it?
anveshmekala
added
the
pr ready for visual snapshots
jcfranco
approved these changes
Feb 8, 2023
src/utils/focusTrapComponent.ts
Outdated
| @@ -42,12 +42,15 @@ export function connectFocusTrap(component: FocusTrapComponent): void { | |||
| return; | |||
| } | |||
|
|
|||
| if (focusTrapEl.tabIndex == null) { | |||
| focusTrapEl.tabIndex = -1; | |||
| if (focusTrapEl.tabIndex === null) { | |||
There was a problem hiding this comment.
This if block won't be executed as tabIndex is a number and won't ever be null.
There was a problem hiding this comment.
when there is no tabIndex defined which is the case for focusTrapEl in modal , the value will be null
There was a problem hiding this comment.
When no tabIndex is defined, the value will be -1 if it's a non-focusable element by default. Otherwise, it will be 0.
| @@ -734,4 +734,48 @@ describe("calcite-popover", () => { | |||
| shadowFocusTargetSelector: `.${CSS.closeButton}` | |||
| })); | |||
| }); | |||
|
|
|||
| // refer to https://github.com/Esri/calcite-components/issues/5993 for context | |||
There was a problem hiding this comment.
Nice! WDYT about moving the comment inside the test, so if for whatever reason it's modified or moved, it goes with it?
jcfranco
changed the title
anveshmekala
added
pr ready for visual snapshots
anveshmekala
added
pr ready for visual snapshots
anveshmekala
deleted the
anveshmekala/6281-fix-modal-focustrap-on-click
branch
github-actions
bot
added this to the 2023 February Priorities Patch (1.0.5) - Bugs only milestone
jcfranco
added a commit
that referenced
this pull request
Feb 15, 2023
**Related Issue:** #6454 ## Summary This fixes an issue caused by setting the `tabindex` attribute on the host element instead of the property ([previous behavior](#6434)). ### Notes * When `tabindex` was set, `focus-trap` seemed to move focus to the host as focus fallback even if focus was already set within the focus trap. We should look into only setting the host as focus fallback if there is no focusable content within the trap. * The `tabindex` setting logic was removed instead of being rolled back because the [previous version](https://github.com/Esri/calcite-components/blob/059d6eee6a8dc0a0d74db6e113d30cafebac25bb/src/utils/focusTrapComponent.ts#L33-L35) was misleading and would never be invoked (`HTMLElement.tabIndex` [is always an integer](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex#value)). * Some focus-related tests were fixed as they were not properly set up and produced false positives. * A test util was added to help match elements against the focused element.
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.
Related Issue: #6281
Summary
This PR will fix
focusTrapissue when user clicks inside themodal. When user clicks inside the modal,focusTrapbehavior wont be affected.