how to set focus on another item ejmenu

[Jasser]

Is there a way to set the focus on another item? im using EjMenu but pressing alt + j only sets the focus on the first item, is there a way to do it on another item?

[YuvanShankar Arunagiri]

Hi Jasser,

Query: pressing alt + j only sets the focus on the first item, is there a way to do it on another item?

The alt + j key action work only for focusing the first item of the component, not for navigate within the component item. We have other key action support for navigating the menu items. Please refer the below UG documentation link for more details.

UG link: https://ej2.syncfusion.com/documentation/menu/accessibility/#user-interaction-with-keyboard

Please get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Jasser]

Hello, thanks for answering.

Ok, I understand, but isn't there any configuration that allows to do it (set the focus) to the next element?

I mean, alt + j focus on the first item, is there a way that pressing alt + e (example) sets the focus on the 2nd item? not to the sub item, to the next item. (keeping the functionality of keyboard shortcuts up, down, left....)

[YuvanShankar Arunagiri]

Hi Jasser,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below sample and code snippet. Please use tab key for focusing the first item and alt + E key for focusing the second item.

[index.ts]:

function onCreated() {

        document.getElementsByClassName('e-menu-wrapper')[0]

    .querySelectorAll('.e-menu-parent')[0].addEventListener('keydown',  function (e: KeyboardEvent) {

        if (e.keyCode == 69 && e.altKey) {

            e.preventDefault();

            let elem: any = document.getElementsByClassName("e-menu-parent")[0];

            for(var i = 0; i < elem.childNodes.length; i++) {

                if (elem.childNodes[i].classList.contains('e-focused')) {

                    elem.childNodes[i].classList.remove('e-focused');

                }

            }

            var child = elem.childNodes[1];

            child.classList.add('e-focused');

        }

      },

      true

    );

    }

Sample link: https://stackblitz.com/edit/zvfpue?file=index.ts,index.html

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Jasser]

Thank you, I managed to solve the problem with your help

[YuvanShankar Arunagiri]

Hi Jasser,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A