Checkboxes: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<strong>Use BoostrapVue's checkbox:</strong> | |||
<b-form-checkbox | <nowiki><b-form-checkbox | ||
v-model="isBar" | v-model="isBar" | ||
> | ><nowiki> | ||
Bar | Bar | ||
</b-form-checkbox> | |||
<nowiki></b-form-checkbox><nowiki> | |||
Confusingly, it can also be <b-checkbox> (src). | Confusingly, it can also be <b-checkbox> (src). | ||
| Line 11: | Line 13: | ||
<strong>Tab navigation.</strong> See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: | <strong>Tab navigation.</strong> See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: | ||
private onKeyDownFooCheckbox(e: KeyboardEvent) | <nowiki>private onKeyDownFooCheckbox(e: KeyboardEvent) | ||
{ | { | ||
this.emulateTab( | this.emulateTab( | ||
| Line 23: | Line 25: | ||
(this.$refs.bazField as any).$el.select(); | (this.$refs.bazField as any).$el.select(); | ||
}); | }); | ||
} | }</nowiki> | ||
Then add @keydown="onKeyDownFooCheckbox" define a method to set the keydown event listener on the checkbox and call it in mounted() callback: | Then add @keydown="onKeyDownFooCheckbox" define a method to set the keydown event listener on the checkbox and call it in mounted() callback: | ||
private initializeKeyDownEvents() { | <nowiki>private initializeKeyDownEvents() { | ||
(this.$refs.fooCheckbox as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooCheckbox); | (this.$refs.fooCheckbox as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooCheckbox); | ||
(this.$refs.fooCheckbox as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooCheckbox); | (this.$refs.fooCheckbox as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooCheckbox); | ||
}</nowiki> | }</nowiki> | ||
Revision as of 18:18, 1 October 2023
Use BoostrapVue's checkbox:
<b-form-checkbox v-model="isBar" ><nowiki> Bar <nowiki></b-form-checkbox><nowiki> Confusingly, it can also be <b-checkbox> (src). <strong>Tab navigation.</strong> See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: <nowiki>private onKeyDownFooCheckbox(e: KeyboardEvent) { this.emulateTab( e, () => { (this.$refs.barField as any).$el.focus(); (this.$refs.barField as any).$el.select(); }, () => { (this.$refs.bazField as any).$el.focus(); (this.$refs.bazField as any).$el.select(); }); }
Then add @keydown="onKeyDownFooCheckbox" define a method to set the keydown event listener on the checkbox and call it in mounted() callback:
private initializeKeyDownEvents() { (this.$refs.fooCheckbox as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooCheckbox); (this.$refs.fooCheckbox as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooCheckbox); }