KevinVandy/material-react-table

Filter input incorrectly defaults to `autocomplete="new-password"`

imnasnainaec opened this issue · 2 comments

material-react-table version

v2.11.2

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

At the top of any column, right click in the filter textfield and "Inspect" the element. It is something like:

<input aria-invalid="false" autocomplete="new-password" id=":rl:" placeholder="Filter by Name" type="text" aria-label="Filter by Name" title="Filter by Name" class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input" value="">

but it shouldn't be autocomplete="new-password". (For one thing, browser credential managers might try to interact with it.)

Minimal, Reproducible Example - (Optional, but Recommended)

The codesandbox from https://www.material-react-table.com/docs/examples/filter-variants shows the bug:
https://codesandbox.io/p/devbox/github/KevinVandy/material-react-table/tree/v2/apps/material-react-table-docs/examples/customize-filter-variants/sandbox?file=%2Fsrc%2FTS.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not have time to dig into it

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Password managers "might" interact with it or they are? I added this on purpose to solve the annoying behavior of browsers trying to auto-fill filters with common input names. It has worked wonderfully since I've added it as a built-in for the filters in particular. Browser saved data will still work.

If anyone is able to report unintended behavior because of this, I'll re-open and get rid of this by default. Otherwise, just set muiFilterTextfieldProps.InputProps.autocomplete: "", if you don't want it for your use case.