[web] Disable password reveal icon if suffixIcon is used on Edge browser #83695
Description
Hello, I'm having an issue while trying to create a custom password field using a FormTextField. I've set up a suffixIcon with the action to toggle the obscureText property. It works great on Chrome, but Edge displays a password reveal control.
How to reproduce:
TextFormField(
...
obscureText: obscureText,
obscuringCharacter: obscuringCharacter,
decoration: InputDecoration(
suffixIcon: GestureDetector(
onTap: () {
...
obscureText = !obscureText;
}),
),
)
Actual
On Edge only:
Expected
I'm missing a way to easily disable this feature. Or maybe it might just be always disabled?
Workaround
Inject this CSS styling using
final nodeValidatorBuilder = NodeValidatorBuilder.common()
..allowElement('style');
document.querySelector('head')?.insertAdjacentHtml(
'beforeend',
'''
<style>
input::-ms-reveal,
input::-ms-clear{
display: none;
}
</style>
''',
validator: nodeValidatorBuilder,
);
}