Material-ui: [Autocomplete] Prevent backspace key from deleting selected chips when using multiple values

[lukefisklennon]

Summary 💡

There should be a way to disable or customise the current behaviour of the backspace key in the autocomplete component (when using multiple values). Currently, pressing backspace will delete the rightmost selected chip. Holding backspace will quickly clear everything. For my use case, this could negatively effect the user experience.

[oliviertassinari]

@lukefisklennon One option is to control the value and filter events. The second is to help us get #19887 down the finish line.

[lukefisklennon]

@oliviertassinari Thanks for the quick reply, that worked!

[lukefisklennon]

Someone emailed me asking about what code I used to get it working, so here's a rough outline of what I did if anyone needs it:

<Autocomplete
    // other props...
    renderInput={(params) => (
        <TextField
            {...params}
            // other props...
            onChange={(event) => {/* handle event... */}} 
            onKeyDown={(event: any) => {
                if (event.key === 'Backspace') {
                    event.stopPropagation();
                }
            }}
        />
    )}
/>