Autocomplete: show all items Behavior

[rjavier-trimbler]

Description

References #2282 #2567

This PR without knowing also fixes the issue:: #2567

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[J-Ruiz1]

@cjwinsor this has already been tested for the following scenarios in this user story:

Scenario 1: Validate that the Process Filter shows all available options when focused

Scenario 2: Validate that the Process Filter is able to filter based on search criteria via adding characters

Scenario 3: Validate that the Process Filter is able to filter based on search criteria via removing characters. An empty again Process filter must show all available options

Scenario 4: Validate that the Process Filter clears all characters and show the placeholder text "search processes" when characters are entered but the filter loses focus without a selection

Scenario 5: Validate that the Process Filter shows all available options when refocusing on the filter after an option was previously selected. The already selected item item shows with a checkmark on the right and is the second one from the bottom of the list (when able)

Scenario 6: Validate that when there are no matches when searching with no previous selection the dropdown will show a “not found” message.

Scenario 7: Validate that when there are no matches when searching with a previous selection the dropdown will show a “not found” message. Focusing out will show the previously selected option

Scenario 8: Validate that clearing the autocomplete removes the highlighted selection.

[cjwinsor]

Things I noticed:

A flicker was introduced when picking an item (in my case, I didn't set any props, only set options) that wasn't there before. The text goes blank, then shows new value.

It now behaves as if show-options-on-focus is always enabled. It should not show the items on focus until that prop is set to true. There seems to be a previous bug where once there is a selection it opens the autocomplete on focus even when show-options-on-focus is not set to true, that isn't correct either.

If I have a value selected, and while focused on the textbox, click the down arrow, it erases the text and the selection. The down arrow should not remove the value/selection.

[J-Ruiz1]

Validated that the autocomplete complies with the following scenarios

Scenario 1: Validate that the Process Filter shows all available options when focused

Scenario 2: Validate that the Process Filter is able to filter based on search criteria via adding characters

Scenario 3: Validate that the Process Filter is able to filter based on search criteria via removing characters. An empty again Process filter must show all available options

Scenario 4: Validate that the Process Filter shows all available options when refocusing on the filter after an option was previously selected.

Scenario 5: Validate that when there are no matches when searching with no previous selection the dropdown will show a “not found” message.

Scenario 6: Validate that when there are no matches when searching with a previous selection the dropdown will show a “not found” message.

Scenario 7: Validate that clearing the autocomplete removes the highlighted selection.

https://deploy-preview-2484--moduswebcomponents.netlify.app/?path=/story/user-inputs-autocomplete--default&args=clearable:true;showOptionsOnFocus:true;options[3]:Pineapple;options[4]:Strawberry;options[5]:Grape;options[6]:Watermelon;options[7]:Kiwi;options[8]:Mango;options[9]:Peach;options[10]:Plum;options[11]:Cherry;options[12]:Pear;options[13]:Lemon;options[14]:Lime;options[15]:Blueberry;options[16]:Raspberry;options[17]:Blackberry;options[18]:Cranberry;options[19]:Pomegranate;options[20]:Coconut