[BUG] Formiojs Select Component Autocomplete Feature Causes Browsers To Complete Incorrect Fields

[SalTor]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
  • Version:
• Formio.js version: v4.10.5
• Frontend framework: none
• Browser: chrome, firefox, safari
• Browser version: n/a

Steps to Reproduce

1. Set autofill for address in your browser
2. Have a form with select inputs
3. Open the form and use completed info

Expected behavior

If browser finds inputs whose databinding roughly matches the existing autofill field name, it fills it in

Observed behavior

Browsers will occasionally fill in the incorrect field

I believe this is due to the [ref="autocompleteInput"] that the select component uses does not have a name attribute corresponding to the select's name attribute, leaving the browser with a weird situation of "here's an input, and I have this data I can complete, I'll put it there" and consequently the select component setting that value into the field's value.

Example

Live example via JSFiddle

In this form there are inputs for patient.name.first, patient.name.last, patient.gender, patient.homeAddress.state, etc. If you have an autofill address which includes "United States" you may observe that the "State" dropdown gets autofilled with "United States".

Again, I believe this is due to the input[ref="autocompleteInput"] not having a name="data[patient.homeAddress.state]" field which matches its corresponding select input's name value.

I am not 100% confident that alone would be sufficient and so in the interim for my forms I am adding onto the select component's attach event and outright removin the autocompleteInput element from the dom so that it doesn't get used

[wag110894]

@SalTor,

Thank you for reaching out! We have created a ticket and have added it to our backlog. We welcome a pull request and have a process to expedite if you are interested.

For reference, the ticket number is FJS-1234.

We will let you know once this issue is resolved.

[rubandangol]

This has been a massive issue for us lately. A lot of incorrect data are getting autofilled and submitted. One of the main issues is with the select components as there is no option to disable autocomplete for this component. When static search is turned on for a select component, the user will see autofill suggestion when he clicks on it. So he clicks on a suggestion and the select component gets autofilled with a value which might not even in its option list. And the worst part is that Formio doesn't give any validation error even though the autofilled value is invalid. To add to the misery, the browsers seem to give autofill suggestion of "states" for component with the api name "status". We have had cases of state names being successfully submitted for select components that are not even related to states at all. Also, there are cases where full state names are getting submitted for select components that only take in state codes, and the same with countries.

As for the text field and number components, while we are able to disable auto complete, it would be so much better if there was a way to disable autocomplete for all forms and fields with a single config. Currently we are having to take the challenge of going through hundreds of our forms, component by component to disable it.

[SalTor]

@rubandangol if you happen to be making use the formio npm library on the sites hosting your forms it's possible you can disable autocomplete on each input on page render similar to how in my project we have hooked into the attach method of the select inputs to remove this hidden input which causes nefarious autocompleting

[Brokkoly]

Is there any update for this issue? I have started running into this as well (Application: 7.0.42, Renderer: 4.12.4)

[SalTor]

@Brokkoly I haven't heard an update from the formio team on this but in the mean time my team has deployed this as a working solution:

import { Components } from 'formiojs'

const SelectComponent = (Components as any).components.select

export default class Select extends (SelectComponent as any) {
    attach(element) {
        super.attach(element)

        if (this.refs.autocompleteInput) {
            this.element.removeChild(this.refs.autocompleteInput)
        }
    }
}

This removes the autocomplete input from the page, which isn't preferable if there's information that could be filled in, but it is better than incorrect daya being applied to your form data.

Something I have in my backlog to look into implementing is settting this hidden input's name property to have the value of the component's key property, which if named appropriately could potentially enable this autofill feature to work as expected

[Brokkoly]

It would probably be annoying since most of the form is autocompletable. I've opted for now to just mark the field as invalid if this happens: if(!component.data.values.find(e=>e.value===input)){ valid=component.label + ' is invalid'; } I'll have to revisit it when I have more time to do so.

[MichaelNussbaumerGOWEST]

if(!component.data.values.find(e=>e.value===input)){ valid=component.label + ' is invalid'; }

Works, but only if you define the values. In my case I get the values via custom function from an API.

I pass the submission to Salesforce and it is pretty annoying that I can't turn off autocomplete. As the submission to Salesforce fails when a user filles the country field with autocomplete and SF needs the CountryCode. This should be fixed

[JohnnyGreen82]

I see this was an issue in 2020...it is still an issue in 2023. Is there any plan to fix this? It is really causing issues with bad data being submitted on forms.

[Sidiro23]

As of now, this item remains on our backlog and is not scheduled for development by our team. However, we encourage community contributions and would gladly review any pull requests addressing this issue. Your input is appreciated in moving this forward.