Skip to content

Commit c4a8edb

Browse files
tmorehousejacobmllr95
tmorehouse
authored and
jacobmllr95
committed
fix(form control): handle autofocus inside modal or when inside a transition (bootstrap-vue#3386)
* fix(form control autofocus): handle autofocus inside modal or when inside a transition Wrap autofocus routine in a requestAnimationFrame to allow for autofocusing in modal to work. * Update form-checkbox.spec.js * Update form-file.spec.js * Update form-input.spec.js * Update form-radio.spec.js * Update form-select.spec.js * Update form-textarea.spec.js
1 parent 85bcbad commit c4a8edb

File tree

7 files changed

+37
-21
lines changed

7 files changed

+37
-21
lines changed

‎src/components/form-checkbox/form-checkbox.spec.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import BFormCheckbox from './form-checkbox'
22
import { mount } from '@vue/test-utils'
3+
import { waitNT, waitRAF } from '../../../tests/utils'
34

45
describe('form-checkbox', () => {
56
// --- Custom checkbox structure, class and attributes tests ---
@@ -1270,7 +1271,8 @@ describe('form-checkbox', () => {
12701271
}
12711272
})
12721273
expect(wrapper.vm).toBeDefined()
1273-
await wrapper.vm.$nextTick()
1274+
await waitNT(wrapper.vm)
1275+
await waitRAF()
12741276

12751277
const input = wrapper.find('input')
12761278
expect(input.exists()).toBe(true)
@@ -1292,7 +1294,8 @@ describe('form-checkbox', () => {
12921294
}
12931295
})
12941296
expect(wrapper.vm).toBeDefined()
1295-
await wrapper.vm.$nextTick()
1297+
await waitNT(wrapper.vm)
1298+
await waitRAF()
12961299

12971300
const input = wrapper.find('input')
12981301
expect(input.exists()).toBe(true)

‎src/components/form-file/form-file.spec.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from '@vue/test-utils'
2-
import { waitNT } from '../../../tests/utils'
2+
import { waitNT, waitRAF } from '../../../tests/utils'
33
import BFormFile from './form-file'
44

55
describe('form-file', () => {
@@ -517,7 +517,8 @@ describe('form-file', () => {
517517
}
518518
})
519519
expect(wrapper.vm).toBeDefined()
520-
await wrapper.vm.$nextTick()
520+
await waitNT(wrapper.vm)
521+
await waitRAF()
521522

522523
const input = wrapper.find('input')
523524
expect(input.exists()).toBe(true)

‎src/components/form-input/form-input.spec.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import { mount } from '@vue/test-utils'
3-
import { waitNT } from '../../../tests/utils'
3+
import { waitNT, waitRAF } from '../../../tests/utils'
44
import BFormInput from './form-input'
55

66
describe('form-input', () => {
@@ -800,7 +800,8 @@ describe('form-input', () => {
800800
}
801801
})
802802
expect(wrapper.vm).toBeDefined()
803-
await wrapper.vm.$nextTick()
803+
await waitNT(wrapper.vm)
804+
await waitRAF()
804805

805806
const input = wrapper.find('input')
806807
expect(input.exists()).toBe(true)
@@ -818,7 +819,8 @@ describe('form-input', () => {
818819
}
819820
})
820821
expect(wrapper.vm).toBeDefined()
821-
await wrapper.vm.$nextTick()
822+
await waitNT(wrapper.vm)
823+
await waitRAF()
822824

823825
const input = wrapper.find('input')
824826
expect(input.exists()).toBe(true)

‎src/components/form-radio/form-radio.spec.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import BFormRadio from './form-radio'
22
import { mount } from '@vue/test-utils'
3+
import { waitNT, waitRAF } from '../../../tests/utils'
34

45
describe('form-radio', () => {
56
/* Custom radio structure, class and attributes tests */
@@ -972,7 +973,8 @@ describe('form-radio', () => {
972973
}
973974
})
974975
expect(wrapper.vm).toBeDefined()
975-
await wrapper.vm.$nextTick()
976+
await waitNT(wrapper.vm)
977+
await waitRAF()
976978

977979
const input = wrapper.find('input')
978980
expect(input.exists()).toBe(true)
@@ -993,7 +995,8 @@ describe('form-radio', () => {
993995
}
994996
})
995997
expect(wrapper.vm).toBeDefined()
996-
await wrapper.vm.$nextTick()
998+
await waitNT(wrapper.vm)
999+
await waitRAF()
9971000

9981001
const input = wrapper.find('input')
9991002
expect(input.exists()).toBe(true)

‎src/components/form-select/form-select.spec.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from '@vue/test-utils'
2-
import { waitNT } from '../../../tests/utils'
2+
import { waitNT, waitRAF } from '../../../tests/utils'
33
import BFormSelect from './form-select'
44

55
describe('form-select', () => {
@@ -586,7 +586,8 @@ describe('form-select', () => {
586586
}
587587
})
588588
expect(wrapper.vm).toBeDefined()
589-
await wrapper.vm.$nextTick()
589+
await waitNT(wrapper.vm)
590+
await waitRAF()
590591

591592
const input = wrapper.find('select')
592593
expect(input.exists()).toBe(true)
@@ -605,7 +606,8 @@ describe('form-select', () => {
605606
}
606607
})
607608
expect(wrapper.vm).toBeDefined()
608-
await wrapper.vm.$nextTick()
609+
await waitNT(wrapper.vm)
610+
await waitRAF()
609611

610612
const input = wrapper.find('select')
611613
expect(input.exists()).toBe(true)

‎src/components/form-textarea/form-textarea.spec.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { mount } from '@vue/test-utils'
2+
import { waitNT, waitRAF } from '../../../tests/utils'
23
import BFormTextarea from './form-textarea'
34

45
describe('form-textarea', () => {
@@ -1026,7 +1027,8 @@ describe('form-textarea', () => {
10261027
}
10271028
})
10281029
expect(wrapper.vm).toBeDefined()
1029-
await wrapper.vm.$nextTick()
1030+
await waitNT(wrapper.vm)
1031+
await waitRAF()
10301032

10311033
const input = wrapper.find('textarea')
10321034
expect(input.exists()).toBe(true)
@@ -1044,7 +1046,8 @@ describe('form-textarea', () => {
10441046
}
10451047
})
10461048
expect(wrapper.vm).toBeDefined()
1047-
await wrapper.vm.$nextTick()
1049+
await waitNT(wrapper.vm)
1050+
await waitRAF()
10481051

10491052
const input = wrapper.find('textarea')
10501053
expect(input.exists()).toBe(true)

‎src/mixins/form.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { matches, select, isVisible } from '../utils/dom'
1+
import { matches, select, isVisible, requestAF } from '../utils/dom'
22

33
const SELECTOR = 'input, textarea, select'
44

@@ -38,13 +38,15 @@ export default {
3838
methods: {
3939
handleAutofocus() {
4040
this.$nextTick(() => {
41-
let el = this.$el
42-
if (this.autofocus && isVisible(el)) {
43-
if (!matches(el, SELECTOR)) {
44-
el = select(SELECTOR, el)
41+
requestAF(() => {
42+
let el = this.$el
43+
if (this.autofocus && isVisible(el)) {
44+
if (!matches(el, SELECTOR)) {
45+
el = select(SELECTOR, el)
46+
}
47+
el && el.focus && el.focus()
4548
}
46-
el && el.focus && el.focus()
47-
}
49+
})
4850
})
4951
}
5052
}

0 commit comments

Comments
 (0)