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

Environment

Please provide as many details as you can:

• Hosting type
  • 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

[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.

[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