[autocomplete] Inconsistent behavior between single and multiple rendered values

[wjwat]

Steps to reproduce

Steps:

1. Open this link to live example: Single Value Rendering
2. Compare behavior for the following between single value and multiple value rendering.
3. Generally multiple value rendering behaves as I'd expect except where noted below.

ArrowLeft

Single value

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. Press left and observe that the set value is selected.

With no input present the set value is selected.

Multiple value

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. Press left and observe that no set value is selected.
4. No matter where the cursor is no value is every selected when pressing ArrowLeft.

With no input present the most recent picked value is selected.

For either multiple or single I would think that a value could be selected if the cursor is at the beginning of the input, but at least it should have consistent behavior between the two.

Delete

Single value

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. Press delete and observe that the set value is deleted and that the deletion is sent to the input field as well deleting input text depending on where the cursor is.

Multiple values

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. Press delete and observe that no set value is removed and that only text is removed. To delete a set value it must first be selected. This is regardless of whether input is present or not.

Backspace

Single value

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. Press backspace and the set value is removed and the backspace is sent to the input field as well.

Multiple value

1. Set a value and type some input.
2. Place your cursor anywhere in the input field.
3. No value is removed and backspace only ever affects text input unless all input is removed. If a value is selected and backspace is pressed it will remove that selected value.

Search keywords: autocomplete freesolo multiple single rendered values Backspace Delete ArrowLeft

[mj12albert]

No value is removed and backspace only ever affects text input

Under "Backspace/Multiple value/3." – backspace removes chips from a multiple autocomplete e.g. in this demo

[wjwat]

No value is removed and backspace only ever affects text input

Under "Backspace/Multiple value/3." – backspace removes chips from a multiple autocomplete e.g. in this demo

Thanks for catching that, I've updated that point.

[harsher216]

@ZeeshanTamboli @wjwat @aarongarciah

Hi! We are a team of 3 CMU students and would like to work on this issue as part of our Software Engineering course project. Could you confirm this is available to work on, and if so assign the issue to me? Thanks!

[mj12albert]

@harsher216 You are welcome to open PRs directly, be sure to link to this issue

I would also suggest you first verify each dot point in the issue description as I haven't gone through all of them myself, and break this up into multiple PRs whenever possible

[mj12albert]

@wjwat For "ArrowLeft", would you mind sharing a screen recording that shows the differences you describe? I'm not sure I fully understand the issue

In the multiple demos in the docs, when the input has focus with the caret at the end, and when there are values already selected, ArrowLeft clearly moves the focus from the textbox to the chips