Checkboxes: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<strong>Use BoostrapVue's checkbox:</strong> <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(); }, () =>...") |
No edit summary |
||
Line 7: | Line 7: | ||
Confusingly, it can also be <b-checkbox> (src). | 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: | |||
<strong>Tab navigation.</strong> See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: | |||
private onKeyDownFooCheckbox(e: KeyboardEvent) { | private onKeyDownFooCheckbox(e: KeyboardEvent) { | ||
this.emulateTab( | this.emulateTab( |
Revision as of 18:10, 1 October 2023
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);
}