cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.36k stars 156 forks source link

[Bug]: autoComplete props not work on many input #2745

Closed MwSpaceLLC closed 5 days ago

MwSpaceLLC commented 1 month ago

Browser

Chrome, Safari, Firefox, Edge

Package version

3.0.748

React version

18

Description

<Autosuggest
            value={value}
            options={options}
            invalid={invalid}
            autoComplete={false}
            statusType={loadingStatus}
            onChange={handleOnSearch}
            empty="Nessuna azienda trovata"
            ariaLabel="Autosuggest example with suggestions"
            placeholder="Cerca azienda o inserisci Ragione Sociale"
            errorText={loadingStatus === 'error' && 'Errore nella richiesta'}
        />

image

Source code

No response

Reproduction

basic, use any input of cloudscape

Code of Conduct

taheramr commented 1 month ago

the autoComplete property is to disable the <Autosuggest/> dropdown from changing based on your input.

on the other hand, you can use the disableBrowserAutocorrect property to natively disable the browser autocomplete behavior

gethinwebster commented 1 month ago

The Cloudscape autosuggest component always automatically sets autocomplete="off" (reference: https://github.com/cloudscape-design/components/blob/main/src/internal/components/autosuggest-input/index.tsx#L279), however browsers vary in how much they actually respect this (https://stackoverflow.com/questions/25823448/ng-form-and-autocomplete-off/39689037#39689037).

I wasn't however able to recreate this behavior in any browser that I use, if you're able to provide more details on how to recreate this, including exact browser version(s) used that would help us to provide more meaningful feedback.

gethinwebster commented 5 days ago

Closing due to inactivity, feel free to reopen if there are any outstanding questions.