Autocomplete: show all items Behavior #2484
Conversation
…omplete and add test cases
✅ Deploy Preview for moduswebcomponents ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
…ntract test (default) - decision test (with controls)
| @@ -195,7 +209,14 @@ export class ModusAutocomplete { | |||
| }; | |||
|
|
|||
| handleInputBlur = () => { | |||
| this.hasFocus = !this.disableCloseOnSelect; | |||
| if (!this.hasOptionMatched(this.value)) { | |||
There was a problem hiding this comment.
Nesting if statements makes the code harder to read. Can you switch this to something like
if (this.hasOptionsMatched(this.value) ||
this.selectedOption === '' ||
this.value === '' ||
this.hasFocus) {
return;
}
this.value = this.selectedOption;
this.disableFiltering = true;This makes it easier to tell what conditions cause it to not continue.
| @@ -321,8 +343,11 @@ export class ModusAutocomplete { | |||
| search = search || ''; | |||
| const isSearchEmpty = search.length === 0; | |||
|
|
|||
| if ((isSearchEmpty && !this.showOptionsOnFocus) || (this.disableFiltering && this.disableCloseOnSelect)) { | |||
| if (isSearchEmpty) this.selectedOption = ''; | |||
There was a problem hiding this comment.
one liners generally make code harder to read as it puts the action at a variable distance from the left depending on the condition. Update to:
if (isSearchEmpty) {
this.selectionOption = '';
}
… option list content
… option list content
|
@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. |
There was a problem hiding this comment.
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.
| const optionList = this.el.shadowRoot.querySelector(`.options-container`) as HTMLUListElement; | ||
|
|
||
| const selectedOption = optionList.querySelector('li.selected') as HTMLElement; | ||
| if (selectedOption) { |
There was a problem hiding this comment.
Could you have used selectedOption.scrollIntoView() to use the native browser handling?
Description
Behavior here:
Default:
1- it shows all options when focus
2- if you click an option it will highlight it and hide the combo box
3- if you click on the autocomplete again it will show all the options with the selected option
4- if you're typing, it will filter the options
5- if there's no matches then it will show the "no found message" and when you focusOut it will place the previous option selected
6- if you clear the autocomplete then it will remove the highlighted option selected
disableCloseOnSelect
the same behavior as Default but the step 2 it wont hide the combo box
showOptionsOnFocus
the same behavior as Default but the step 3 it only show all the options if there's no option selected
A good reference of what we're following on this PR:
https://mui.com/material-ui/react-autocomplete/#combo-box
References #2282
Type of change
How Has This Been Tested?
Checklist