Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(useFocusTrap): new function #433

Merged
merged 8 commits into from Apr 8, 2021
Merged

feat(useFocusTrap): new function #433

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8af6350
feat(useFocusTrap): new function
wheatjs Apr 7, 2021
34c1cb0
fix issue with focus trap not working when navigated to from other page
wheatjs Apr 7, 2021
9ef90a2
Update packages/integrations/useFocusTrap/index.md
wheatjs Apr 8, 2021
0fcab72
Update packages/integrations/useFocusTrap/index.ts
wheatjs Apr 8, 2021
9b98b7e
fix: update demo. Allow ref change for useFocusTrap
wheatjs Apr 8, 2021
1d683ab
Merge branch 'main' of github.com:wheatjs/vueuse into main
wheatjs Apr 8, 2021
8450c55
fix: remove unnecessary stop
wheatjs Apr 8, 2021
33bad1b
fix: reflect foucs trap state on button
wheatjs Apr 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/integrations/useFocusTrap/demo.vue
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ const { hasFocus, activate, deactivate } = useFocusTrap(target)
<template>
<div class="flex flex-col items-center">
<button @click="activate()">
Trap Focus
Trap Focus Within Form
</button>
<input
type="text"
Expand Down
8 changes: 4 additions & 4 deletions packages/integrations/useFocusTrap/index.ts
View file
Open in desktop
Expand Up @@ -86,9 +86,6 @@ export function useFocusTrap(target: MaybeElementRef, options: UseFocusTrapOptio
const stop = watch(
() => unrefElement(target),
(el: HTMLElement) => {
if (el)
stop()

trap = createFocusTrap(el, {
...focusTrapOptions,
onActivate() {
Expand All @@ -113,7 +110,10 @@ export function useFocusTrap(target: MaybeElementRef, options: UseFocusTrapOptio
}, { flush: 'post' })

// Cleanup on unmount
tryOnUnmounted(deactivate)
tryOnUnmounted(() => {
stop()
wheatjs marked this conversation as resolved.
Show resolved Hide resolved
deactivate()
})

return {
hasFocus,
Expand Down