dmc.Select autoSelectOnBlur=True on ag grid components

Dash Python
1

I’m testing out the new autoSelectOnBlur prop with the dmc.Select component within ag grid. I think this doesn’t work as I hoped within ag grid. I was hoping upon hitting Tab (or Enter too) it would autoselect the first option, but that doesn’t seem to be the case. When doing this outside of ag grid, that does seem to work. It would be great if the new props (autoSelectOnBlur, clearSearchOnFocus) would also work on dmc.MultiSelect too.

I have my a pycafe to compare the different cases:

I also put in the ag grid agRichSelectCellEditor as a comparison too. If anyone could help me get dmc.Select to work like the agRichSelectCellEditor (tab/enter selects the option and proceeds to the next cell) that would be great. I have actually made a very complex dashAgGridComponents.js with claude-code that does seem to work (i can also autoselect multiple items with a custom key in multiselect too) but it seems to cause issues with other parts of the app i’m trying to build (particularly getting undo/redo to function nicely). I have been resisting using the agRichSelectCellEditor for two reasons: (1) there was no multiselect (but that might be implemented in the new dash ag grid?) (2) the need for enterprise ag grid (3) doesn’t fit in aesthetically with a fully dmc app.

Side-note: I have been having some intermittent issues with the dmc.Select (with searchable=True) freezing the app when the dropdown is clicked. Happens in the pycafe example app sometimes and only with dmc >=2.2. It seems to depend on number of items in the dropdown (probably the size of the dropdown) and the window size (i’m thinking its something to do when the dropbox tries to render near the bottom edge of the window?).

2

Hi @bweinberg

Nice sample app!

I think the agRIchSelectCellEditor is the best option if you have an AG Grid Enterprise licence. It’s optimized to work well in the Grid.

If you are sticking with open source, it looks like the best option is your “dmc.Select, with AutoSelect” example. This componet works the same way both by itself and in the grid. The input keeps it’s focus after you select an option until you either hit tab or click in a different field. I’m not sure how to change that so it works the same way as their Enterprise component (hit Enter again to move to next field).

There is some information on custom keyboard navigation in AG Grid here (but I haven’t tried it): React Grid: Keyboard Interaction | AG Grid

Regarding the dropdown freezing at times, please upgrade to DMC 2.2.1 It includes a bug fix from the upstream Mantine library for this issue.

3

Hi AnnMarie, I’m not sure I totally understand. I am seeing different behaviors of the dmc.Select (with autoSelectOnBlur on) between the component by itself and when its in the grid as a cell editor. When the component is by itself, I can partially type an option out and hit tab and it will have automatically saved it to value. Doing the same with the component in the grid doesn’t work - its the same behavior with or without autoSelectOnBlur active. I understand someone can partially type the option in, then hit Enter, then hit Tab as a way to do the same without mouse input. I would just really like to be able to have this work like Excel where Enter can be used to move vertically down the grid (like with gridOptions enterNavigatesVertically=True, enterNavigatesVerticallyAfterEdit=True) and Tab/shift-Tab to move horizontally. The agRichSelectCellEditor does all this beautifully and now with the MultiSelect (with space bar entering in entires) there, I have incorporated it into my app. However, it would be great if there’s anyone in the community that could help me get these features into custom DMC components as cell editors for the grid.

4

@bweinberg
When I tried your app, I used either click outside or enter to select after typing something in the search. That works fine for me.

The Tab key is designated as the key to press to navigate to the next editable cell in the custom component in your AllFunctionalComponentEditors function:

useEffect(() => {
        params.api.addEventListener('cellEditingStopped', handleStop);
        document.addEventListener('keydown', handleKeyDown);
        params.colDef.suppressKeyboardEvent = (params) => params.editing && params.event.key != 'Tab';
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            delete params.colDef.suppressKeyboardEvent;
            params.api.removeEventListener('cellEditingStopped', handleStop);
        };
    }, []);

Check out the section of the AG Grid docs that covers keyboard navigation with custom components that I linked to in my previous post for more info about how to change this.