SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
267 stars 127 forks source link

[P2][Sourcing][Accessibility][Pretest][Multi-input autocomplete list]The inline autocomplete is difficult to use because, for example, if "tom" (for “Tomato”) is entered, the first result is "Tomato" and the entry is replaced by this. If now "mato" (for “Tomato”) is entered further, then the value in the field is "Tato", which is an invalid entry. Especially with the screen reader, this will lead to many incorrect entries. #10811

Closed I543348 closed 12 months ago

I543348 commented 1 year ago

Is this a bug, enhancement, or feature request?

Bug (functional and accessibility)

Describe your proposal.

The inline autocomplete is difficult to use because, for example, if "har" (for “hardware”) is entered, the first result is "IT Hardware (F0200000)" and the entry is replaced by this. If now "dware" (for “hardware”) is entered further, then the value in the field is "IT dware", which is an invalid entry. Especially with the screen reader, this will lead to many incorrect entries. à DD2 Please remove inline autocomplete or change it (only words beginning with the entered character should be displayed)

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular: 15 core/platform: 0.43.14

If this is a bug, please provide steps for reproducing it; the exact components you are using;

replicable on https://ng-15-downport--fundamental-ngx.netlify.app/#/core/multi-input#includes 1) make sure the flat list is closed 2) using keyboard , start typing "mato" 3) observe that "M" is converted to "T" in input field and wrong text is being read to user which user didnt type This will create lot of issues for blind users.

Please provide relevant source code (if applicable).

https://ng-15-downport--fundamental-ngx.netlify.app/#/core/multi-input#includes

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

Please remove inline autocomplete or change it (only words beginning with the entered character should be displayed) the input control inside fdp-multi-input has a keyup event on removin that it works fine

droshev commented 1 year ago

What we need to modify is if we type a match only by "contains" and not "start with" we should not the auto complete. Example scenario above.

KaptaanBarbosa commented 11 months ago

there could be another case where in case value is not there in existing list we might want to call remote api and update the list.

Please reopen this ticket and check we don't need to delete/replace entered text by user if value is not there in existing list we can get it from DB also via API call.

I543348 commented 11 months ago

We need to try out [autoComplete]="false" as suggested by @mikerodonnell89 , we shall get back after we try this out in case of any further queries. Thanks.