Autocomplete in Data Grid - Editing

[bhaviklotia23]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

User should be able to use Autocomplete component into Data-grid editing feature. Right now, Issue while using Autocomplete in Datagrid is when I search some keywords through options and I put space between keywords, It looses focuses and on press of space key for spacing, my screen scrolls down. Although, I have not set editing flag as true because when this flag sets to true, That particular cell works as TextField instead of Autocomplete.

User can able to implement all types of Autocomplete component into datagrid cell including searchability and add new option in options list as well.

Examples 🌈

Autocomplete in datagrid cell instead of textfield.

Motivation 🔦

Trying to implement this feature in one of my web application having datagrid component. It has Autocomplete in one cell. When user has searched with some keyword and if that keyword has space between two charecters, It scrolls down to last sell right now which is not an expected behaviour. Expected behaviour should be it should allow user to put space between two charecters while searching.

[mj12albert]

@bhaviklotia23 Can you provide a minimal repro? You can fork this template: https://mui.com/r/issue-template-latest

PS here are some tips: https://stackoverflow.com/help/mcve

[bhaviklotia23]

https://657300646087887f910f124c--poetic-cannoli-78d02d.netlify.app/ (Live Demo) https://stackblitz.com/edit/react-awpmkn?file=src%2FTextDrop.js (CodeSandbox example)

Here is the link of demo. You can check autocomplete column. When I type something in autocomplete and put space between two characters by press space bar key, It looses focuses on that cell and scroll down the screen

Thanks & Regards, Bhavik

On Fri, 8 Dec 2023 at 12:21, Albert Yu @.***> wrote:

@bhaviklotia23 https://github.com/bhaviklotia23 Can you provide a repro? You can fork this template: https://mui.com/r/issue-template-latest

— Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/40135#issuecomment-1846634464, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX6BDZTR24KRTKDH36OLAXTYIK2I7AVCNFSM6AAAAABALAXGJWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNBWGYZTINBWGQ . You are receiving this because you were mentioned.Message ID: @.***>

[kelkmere]

@bhaviklotia23 Did you find a solution?

[bhaviklotia23]

@bhaviklotia23 Did you find a solution?

add editable=true. Whenever editable prop is true, try to set focus false for that particular cell.

(I don't have access to code right now but it was a solution for me at that time.)

[shaliniganesan]

could you pls share the code @bhaviklotia23. If editable prop set to true for autocomplete columns in the Data grid, autocomplete is not working.

[jasonhutton-sd]

I am seeing this issue as well. Is there no fix or work around?

[kelkmere]

@jasonhutton-sd

You can try adding onKeyDown to TextField

<Autocomplete
            sx={{ width: '100%' }}
            options={options}
            getOptionLabel={(option) => option.label || ''}
            // defaultValue={defaultValue}
            value={value}
            onChange={(event, value) => {
                // setSelectedValue(value);
                onValueChange(value);
            }}
            renderInput={(params) => (
                <TextField
                    {...params}
                    label={''}
                    variant={'outlined'}
                    size={'small'}
                    fullWidth={true}
                    error={hasError}
                    InputProps={{
                        ...params.InputProps,
                        style: {
                            // borderColor: hasError ? 'red' : params.InputProps.style.borderColor,
                        },
                    }}
                    onKeyDown={(e) => {
                        e.key === " " && e.stopPropagation();
                    }}
                />
            )}
            onInputChange={(event, newInputValue) => {
                loadOptions(newInputValue);
            }}
        />