Vue DropDownButton - Keyboard Support

An end user can use the following keys to interact with the UI component.

Key Action
Moves focus to the action button when splitButton is enabled.
Moves focus to the toggle button when splitButton is enabled.
Enter / Space Opens the drop-down menu when the toggle button is focused.
Simulates a click action when the action button is focused.
Selects a menu item when focused.
↑ / ↓ Moves focus to the previous/following menu item.
Opens the drop-down menu.
Esc Closes the drop-down menu.
Page Up / Page Down Moves focus to the first/last menu item on the page.
Home / End Moves focus to the first/last menu item.

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

  • <template>
  • <DxDropDownButton :ref="myDropDownButtonRef" />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxDropDownButton from 'devextreme-vue/drop-down-button';
  •  
  • const myDropDownButtonRef = 'my-drop-down-button';
  •  
  • export default {
  • components: {
  • DxDropDownButton
  • },
  • data() {
  • return {
  • myDropDownButtonRef
  • }
  • },
  • computed: {
  • dropDownButton: function() {
  • return this.$refs[myDropDownButtonRef].instance;
  • }
  • },
  • mounted: function() {
  • this.dropDownButton.registerKeyHandler('backspace', function(e) {
  • // The argument "e" contains information on the event
  • });
  • this.dropDownButton.registerKeyHandler('space', function(e) {
  • // ...
  • });
  • }
  • }
  • </script>
See Also