search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.47k stars 254 forks source link

[form|ui5-input]: Chrome autofill, on submit input value is empty, only typing works #8706

Closed skipperTux closed 1 month ago

skipperTux commented 3 months ago

Bug Description

There are already some issues with regards to the autocomplete attribute, like #3646, #4671, #6995 and #7841. This bug is about Chrome autofill in Forms, see below. Autofill option is suggested, but on form-submit the value for ui5-input is not set.

Affected Component

ui5-input

Expected Behaviour

Chrome autofill should either work or be disabled by default.

Isolated Example

https://sap.github.io/ui5-webcomponents/components/Dialog/#basic-sample

Steps to Reproduce

Take a simple ui5-dialog, like in your sample, embedded in a form. After the first successful login Chrome has saved the username and offers the autofill option, see first picture below. After selecting the option, the username is shown in the ui5-input element, see second picture below.

When submitting the form, the value for the username is empty. I assume it is because ui5-input relys on keypress or focus for setting the value.

Autofill can simply be turned off by adding autocomplete="off" to the <form> attributes. However should that not be the default for ui5-input, or either fix the autofill behavior?

Log Output, Stack Trace or Screenshots

  1. Autofill option offered image

  2. Autofill value visually set (but will not be submitted) image

Priority

Medium

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

Versino AG

Declaration

niyap commented 2 months ago

Hello @SAP/ui5-webcomponents-topic-rl,

The issue could be easily reproduced in our sample page: https://sap.github.io/ui5-webcomponents/storybook/playground/main/pages/FormSupport/

Type "test" in the first input and submit the form. Once the page is reloaded, if you type t in the same input field "test" is suggested. Submit with "t",then try again but select "test" from the popover with suggestions.

Observed behaviour: Value is not changes to "test". Also, there is a console error: Cannot read properties of undefined (reading 'inputType')

Could you please look over and analyse whether we expect the browser autocomplete functionality or we have to prevent it as already done in sap.m.Input?

Thank you in advance!

Kind Regards, Niya

skipperTux commented 2 months ago

I have to correct myself, the autocomplete="off" attribute does not work reliable. According to a long stackOverflow thread Disabling Chrome Autofill there is no reliable way of disabling autofill in Chrome. A countermeasure is built into Chrome for every workaround.