Skip to content
  • Sponsor vue-a11y/vue-focus-loop

  • Notifications You must be signed in to change notification settings
  • Fork 3
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 3716d1e

Browse files
committedMay 3, 2021
feat: Add autoFocus props
1 parent f6a99d4 commit 3716d1e

File tree

2 files changed

+23
-3
lines changed

2 files changed

+23
-3
lines changed
 

‎README.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,23 @@ isVisible | `Boolean` | `false`
122122
For example:
123123

124124
```html
125-
<FocusLoop :isVisible="isSidebarOpen">
125+
<FocusLoop :is-visible="isSidebarOpen">
126+
<!-- your elements here -->
127+
</FocusLoop>
128+
```
129+
130+
## Disable autofocus on the first element
131+
132+
When activating the `<FocusLoop>`, the first element receives the focus automatically, however, if you want to disable this behavior, just disable it through the `autoFocus` prop.
133+
134+
prop | type | default
135+
----------- | --------- | ------------
136+
autoFocus | `Boolean` | `true`
137+
138+
For example:
139+
140+
```html
141+
<FocusLoop :auto-focus="false">
126142
<!-- your elements here -->
127143
</FocusLoop>
128144
```

‎src/FocusLoop.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default {
3535
isVisible: {
3636
type: Boolean,
3737
default: false
38+
},
39+
autoFocus: {
40+
type: Boolean,
41+
default: true
3842
}
3943
},
4044
@@ -55,7 +59,7 @@ export default {
5559
},
5660
5761
mounted () {
58-
this.focusFirst(this.isVisible || true)
62+
this.focusFirst(this.isVisible)
5963
},
6064
6165
methods: {
@@ -66,7 +70,7 @@ export default {
6670
},
6771
6872
focusFirst (visible) {
69-
if (!visible) return
73+
if (!visible && !this.autoFocus) return
7074
const elements = this.getFocusableElements()
7175
if (elements.length) setTimeout(() => elements[0].focus(), 200)
7276
},

0 commit comments

Comments
 (0)
Please sign in to comment.