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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery DropDownButton - Keyboard Support

jQuery

Angular

Vue

React

See Also