How to change focus to dropdown panel after opening dropdowns in slash command. And set one plugin as default to navigate between plugins

[Rithwinsai2]

📝 Ask a question

_getPluginListItemsDefinitons() {
const editor = this.editor;
const locale = editor.locale;

    this._dropdown = createDropdown(locale);

    this._commandItems = [];
    const commandNames = ['bold','italic','underline','horizontalLine','bulletedList','numberedList','insertTable','codeBlock','paragraph','table','subscript','superscript','widgetBox'];

    commandNames.forEach((commandName) => {
        const command = editor.commands.get(commandName);
        if (command) {
            const buttonModel = {
                type: 'button',
                model: {
                    label: commandName.charAt(0).toUpperCase() + commandName.slice(1),
                    withText: true,
                    icon: icons[commandName] || icons.cog,
                    commandName: commandName,
                },
            };
            this._commandItems.push(buttonModel);
        }
    });

    this._commandItems.sort((a, b) => {
        return a.model.label.localeCompare(b.model.label);
    });

    this._addItemsToDropdown(this._commandItems);
    this._createCustomToClass();

    this._dropdown.isOpen = true;
    console.log("dropdown",this._dropdown)
    if(this._dropdown.isOpen === true){
        this._dropdown.render();
        this.focusTracker = new FocusTracker();
        console.log("focusTracker", this.focusTracker)
        const elementFocus = this._dropdown.panelView;
        this.focusTracker.isFocused = true
        this.focusTracker.focusedElement = elementFocus
        this.focusables = new ViewCollection();
        console.log("focusables", this.focusables)
        
        const focusableElements = this._dropdown.element.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
        focusableElements.forEach(element => {
            const view = new View(element); 
            this.focusables.add(view);
        });
        const firstButton = focusableElements[1];
            if (firstButton) {
                firstButton.focus();
                firstButton.style.setProperty('background-color', '#007bff', 'important');
                firstButton.style.setProperty('color', '#ffff', 'important');
            }
        this.keystrokes = new KeystrokeHandler();
        this.focusCycler = new FocusCycler({
            focusables: focusableElements,
            focusTracker: this._dropdown.panelView,
            keystrokeHandler: this.keystrokes,
            actions: {
                focusPrevious: ['arrowup'],
                focusNext: ['arrowdown']
            }
        });
        console.log("focus cycler", this.focusCycler);
        this._dropdown.panelView.on('keydown', (evt, data) => {
            const keyCode = data.keyCode;
            if (keyCode === 38) { 
                this.focusCycler.focusPrevious(); 
                data.preventDefault();
            } else if (keyCode === 40) {
                this.focusCycler.focusNext(); 
                data.preventDefault();
            }
        });
    }

    this.listenTo(this._dropdown, 'execute', (evt, data) => {
        const commandName = evt.source.commandName;
        if (commandName) {
            this.customExecution(commandName);
            if (!this._dropdown.isOpen) {
                editor.editing.view.focus();
            }
        }
        this._dropdown.isOpen = false;
        this.hideDropdown();
    });
}