React 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.

jQuery
JavaScript
function registerKeyHandlers () {
    const dropDownButton = $("#dropDownButtonContainer").dxDropDownButton("instance");
    dropDownButton.registerKeyHandler("backspace", function(e) {
        // The argument "e" contains information on the event
    });
    dropDownButton.registerKeyHandler("space", function(e) {
        // ...
    });
}
Angular
TypeScript
import { ..., ViewChild, AfterViewInit } from '@angular/core';
import { DxDropDownButtonModule, DxDropDownButtonComponent } from 'devextreme-angular';
// ...
export class AppComponent implements AfterViewInit {
    @ViewChild(DxDropDownButtonComponent, { static: false }) dropDownButton: DxDropDownButtonComponent;
    // Prior to Angular 8
    // @ViewChild(DxDropDownButtonComponent) dropDownButton: DxDropDownButtonComponent;

    ngAfterViewInit () {
        this.dropDownButton.instance.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.dropDownButton.instance.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxDropDownButtonModule
    ],
    // ...
})
Vue
<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>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DropDownButton } from 'devextreme-react/drop-down-button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dropDownButtonRef = React.createRef();
    }

    render() {
        return (
            <DropDownButton ref={this.dropDownButtonRef} />
        );
    }

    get dropDownButton() {
        return this.dropDownButtonRef.current.instance;
    }

    componentDidMount() {
        this.dropDownButton.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.dropDownButton.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}

export default App;
See Also