Checkboxes
Use BoostrapVue's checkbox:
<b-form-checkbox v-model="isBar" >
Bar
</b-form-checkbox>
Confusingly, it can also be <b-checkbox> (src).
Tab navigation. See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler:
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);
}