Skip to content

Commit

Permalink
Add support for shadow DOM and fix event target bug
Browse files Browse the repository at this point in the history
  • Loading branch information
nuxodin committed Feb 27, 2024
1 parent 1ae7f01 commit cd63f86
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ Focus movement by arrow keys

It allows you to focus elements with arrow keys inside a container.

- Works inside shadow dom.
- Use focusgroup="wrap" to focus the first element when the last element is focused and vice versa.
- Use focusgroup="remember" to focus the last focused element when group is focused again.
- Text-Inputs only works for up and down arrow keys.


See also:
https://open-ui.org/components/focusgroup.explainer/
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md
Expand Down
3 changes: 2 additions & 1 deletion focusgroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ function eventTargets(event){
let target = event.target;
let container = target.closest('[u1-focusgroup]');
if (!container) { // inside shadow dom
target = event.originalTarget;
target = event.originalTarget; // only for firefox?
if (!target) return {};
container = target.closest('[u1-focusgroup]');
}
// TODO? handle slotted elements
Expand Down

0 comments on commit cd63f86

Please sign in to comment.