TextInput in outline mode - browser autofill obscures outline

[zactwidale]

Current behaviour

When using the TextInput in outline mode in a react native web build, the browser autocomplete provides a background color to indicate that it was autocompleted. This background obscures the bottom and right border outlines. It also doesn't autofill the areas used in by any left or right props components, such as icons. This is not ideal, but acceptable. Obscuring the outline is a very unprofessional look.

Expected behaviour

Primary expectation:
I expect the browser autofill background to be contained within the outline of the TextInput and not obscure it.
Secondary expectation:
I also expect it to completely fill the outline, not leaving a blank spot for the icons.

How to reproduce?

<TextInput
mode="outlined"
label="Email"
autoComplete="email"
left={<TextInput.Icon icon="email" />}
/>

View in browser (Chrome on Windows or Android, Edge on Windows have been tested)

Preview

What have you tried so far?

Lots of time on Google

Your Environment

software	version
android	12 (also tested on newer, but not sure of version)
react-native	0.74.1 (also 0.73.6)
react-native-paper	^5.12.3
node	20.9.0
npm or yarn	10.7.0
expo sdk	~51.0.2 (also ^50.0.1)
windows	24.0.6367.156
edge	124.0.2478.80
chrome	124.0.6367.156