[Vaadin 24] Modal dialogs allow browsers to auto-fill information below them

Flow
1

In my experience using Vaadin flow, it seems like the auto-filling behaviour of most browsers still works for elements underneath modal dialogs.

The fields that are below modal dialogs that are auto-filled also have no knowledge of these values being populated. When debugging locally and invoking .getValue() on such fields, it returns an empty string.

For my application in particular, this leads to poor user experience because when an attempt to navigate to the next page of my flow is made, the validation on these fields triggers due to lack of a value in the field (when we can clearly see there is a value present in the browser and the HTML).

I have tried a variety of solutions such as setting the property autocomplete="off" or autocomplete="new-password" to no avail. Is there any advice someone can provide? I believe this is likely a bug but not sure.

2

Easy workaround? Make your dialog non-modal

Fiddling with autocomplete (especially with chrome) is way harder

1 Like
3

You could try making the container element that contains your form fields inert while the modal dialog is open: HTMLElement: inert property - Web APIs | MDN. It sounds like that should prevent auto-fill as well.

Using the Flow API the should be container.getElement().setProperty("inert", true).

2 Likes
4

What is the difference between this and disabling the field with .setEnabled(false)?

Also, the reason this won’t work well is because this logic is on many of my windows and the fields vary on all of those windows.

5

I think that this isn’t an option for my app - it is very flow sensitive.

6

Functionally they are similar for your purpose, both make elements non-interactive. With setDisabled you can only disable a single element though. With inert you can make a whole hierarchy non-interactive, so you wouldn’t have to apply it to every individual input field. I think Flow does some additional magic on the server to ignore events for the whole hierarchy as well when you use setDisabled, but not sure if that applies to the client-side as well.

Hard to give specific advice without knowing your application, but I would try to put all forms in all views into some wrapper component and then wire up some logic that sets these wrappers inert when a dialog opens, and removes inert when the dialog closes.

1 Like
7

It seems that there is no perfect solution for this problem, however I made a crude solution based on some feedback on this post.

My dialogs have an Dialog.OpenChangedEventListener that is used to disable the parent container (a VerticalLayout component which prevents the fields within the layout from being altered by the auto-fill mechanisms of the browser.