Radiogroup keyboard navigation

Question

I have a radio group that is set in a table layout:

https://fiddle.sencha.com/#view/editor&fiddle/2ehg

If you navigate around that radio group with left, right, up and down keys, the behaviour is unintuitive. I have searched the code and tried to debug the focus event on the radios, but did not find how/where ExtJS code navigates through the components.

How can I improve the keyboard navigation such that it behaves natural?

score 1 · Accepted Answer · answered Mar 20 '18 at 09:30

With the keyMap config and listening on the navigation key events you can prevent the browser default, calculate the new position and set it. See the working fiddle.

It reacts more than you would expect. When you are on the first item and you press the up-button the new focused item is the last one in the row.

You may have to tweak left and right accordingly to fit your needs.

// get the id for the component from the event
const getPureId = (event) => event.target.id.split('-').splice(0, 2).join('-');
const columnCount = 2;
const maxIndex = 5;
const minIndex = 0;

// config of the panel ...
keyMap : {
    [Ext.event.Event.DOWN]: (event, panel) => {
        var pureId = getPureId(event);
        var comp = Ext.get(pureId).component;
        var pos = panel.items.indexOf(comp);
        var newPos = pos + columnCount;

        // when the newPos is outside of our boundaries we calculate the new one
        // based on the columnCount
        if (newPos > maxIndex) {
            newPos = newPos % (columnCount + 1);
        }

        event.preventDefault();
        panel
          .getComponent(newPos)
          .focus()
          .setValue(true);
    }, [Ext.event.Event.UP]: (event, panel) => {
        var pureId = getPureId(event);
        var comp = Ext.get(pureId).component;
        var pos = panel.items.indexOf(comp);
        var newPos = pos - columnCount;

        // when the newPos is outside of our boundaries we calculate the new one
        // based on the maxIndex
        if (newPos < minIndex) {
            newPos = newPos + maxIndex + 1;
        }

        event.preventDefault();
        panel
          .getComponent(newPos)
          .focus()
          .setValue(true);
    }
},
// more config of the panel ...

Radiogroup keyboard navigation

1 Answers1