[FIXED] kbar keyboard shortcuts troubleshooting

Issue

I am trying to create a component for plotly dash using react-kbar.

I am able to run it without any issues for the most part. However, for some reason, the keyboard shortcuts defined for the actions are not working. The keyboard shortcut for kbar itself is working fine (ctlr + k, escape), but the action shortcuts are not. The actions and the shortcuts are registered fine. I can see the shortcut key combinations appearing against each entry in the list.

Below is snippet of code where I use KBar. What am I doing wrong? Any pointer on debugging will also be of great help!

   ...
    return (
        <KBarProvider id={id} options={{disableScrollbarManagement: true}}>
            <KBarPortal>
                <KBarPositioner>
                    <KBarAnimator
                        style={{
                            maxWidth: mergedStyle.maxWidth,
                            width: mergedStyle.width,
                            borderRadius: '8px',
                            overflow: 'hidden',
                            boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
                            background: mergedStyle.background,
                            color: 'grey',
                            fontFamily: mergedStyle.fontFamily,
                        }}
                    >
                        <KBarSearch
                            style={{
                                padding: '12px 16px',
                                fontSize: '16px',
                                width: '100%',
                                boxSizing: 'border-box',
                                outline: 'none',
                                border: 'none',
                                background: mergedStyle.searchBackground,
                                color: mergedStyle.searchTextColor,
                            }}
                        />
                        <RenderResults {...props} mergedStyle={mergedStyle} />
                        <ActionRegistration
                            actions={actions}
                            setProps={setProps}
                            debug={debug}
                        />
                    </KBarAnimator>
                </KBarPositioner>
            </KBarPortal>
            {children}
        </KBarProvider>
    );
};

function ActionRegistration(props) {
    const action_objects = props.actions.map((action) => {
        if (action.noAction) return createAction(action);
        action.perform = () => {
            if (props.debug) {
                console.log('Performing action', action);
            }
            props.setProps({selected: action.id});
        };
        return createAction(action);
    });
    useRegisterActions(action_objects);
    return null;
}

Solution

Found the issue. I should have placed <ActionRegistration> outside of the kbar itself, but inside <KBarProvider>

  ...
    return (
        <KBarProvider id={id} options={{disableScrollbarManagement: true}}>
            <ActionRegistration
                actions={actions}
                setProps={setProps}
                debug={debug}
            />
            <KBarPortal>
                <KBarPositioner>
                    <KBarAnimator
                        style={{
                            maxWidth: mergedStyle.maxWidth,
                            width: mergedStyle.width,
                            borderRadius: '8px',
                            overflow: 'hidden',
                            boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
                            background: mergedStyle.background,
                            color: 'grey',
                            fontFamily: mergedStyle.fontFamily,
                        }}
                    >
                        <KBarSearch
                            style={{
                                padding: '12px 16px',
                                fontSize: '16px',
                                width: '100%',
                                boxSizing: 'border-box',
                                outline: 'none',
                                border: 'none',
                                background: mergedStyle.searchBackground,
                                color: mergedStyle.searchTextColor,
                            }}
                        />
                        <RenderResults {...props} mergedStyle={mergedStyle} />
                        
                    </KBarAnimator>
                </KBarPositioner>
            </KBarPortal>
            {children}
        </KBarProvider>
    );
};

function ActionRegistration(props) {
    const action_objects = props.actions.map((action) => {
        if (action.noAction) return createAction(action);
        action.perform = () => {
            if (props.debug) {
                console.log('Performing action', action);
            }
            props.setProps({selected: action.id});
        };
        return createAction(action);
    });
    useRegisterActions(action_objects);
    return null;
}

Answered By - najeem