hoist-react icon indicating copy to clipboard operation
hoist-react copied to clipboard

Inline Select with queryFn can not be committed using return key

Open TomTirapani opened this issue 2 years ago • 2 comments

If you configure an inline Select as below, the user can use the return key to select the highlighted option in the list.

editor: props => selectEditor({
    ...props,
    inputProps: {
        options: options
    }
})

However, if you use a queryFn as below, the return key no longer selects an option, and instead blurs the input without changing the value:

editor: props => selectEditor({
    ...props,
    inputProps: {
        queryFn: () => options
    }
})

The keyboard should still be usable to select values when using a queryFn

TomTirapani avatar Jun 22 '23 15:06 TomTirapani

One workaround that I have used, which works with queryFn , is to add this to the column's ColumnSpec:

agOptions: {
    suppressKeyboardEvent: ({event, api}) => {
        if (event.key === 'Enter') {
            // Prevent grid immediately ending edit so the input can flush its value
            wait(50).then(() => api.stopEditing());
            return true;
        }
        return false;
    }
}

It would be best if we could somehow work this (or some other fix) into hoist.

jskupsik avatar Jun 23 '23 20:06 jskupsik

We should start by adding the case to the Toolbox inline editing grid (clearly commented).

amcclain avatar Jun 20 '24 18:06 amcclain