select dropdown is by default editable

[JagadishNM]

What happened?

When I tried to select item from dropdown list, it is editable by default even I didn't use editable directive.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

1.2.1

Code to produce this issue.

No response

[silviowolf]

Proposed behavior for
"editable: false" Mouse:

• Clicking the component opens the dropdown
• typing into the field is not possible
• pressing a keyboard key means: jump to the first item its first character matches the key (e.g. pressing "b" should jump to an item "Banana" and focus it
• pressing same key again focuses the next matching item (e.g. Blackberry)
• If multi-select is active, the dropdown does not close automatically after selecting an item, should only close when clicking outside the dropdown or pressing Esc

Keyboard navigation:

• On enter the field using TAB and single-selection is active, pressing a keyboard key means fill in the first item its first character matches the the key (e.g pressing "b" will fill in item "Banana")
• multiple typing the same key will toggle through all items starting with the same character (e.g. "Banana", "Blackberry", "Blueberry")
• Key up/down will toggle through all valid items
• Alt/Option+Down will open the dropdown, Alt/Option+Up or ESC will close the dropdown
• If enter a multi-select with focus tabbing, pressing a keyboard key will do nothing
• Alt/Option+Down will open the dropdown and the user can move the focus with Up/Down and select with Space
• Single-selection: dropdown will close after selecting an item
• Multi-selection: will keep dropdown open
• Alt/Option+Up or ESC will close the dropdown

"editable: true"
Mouse:

• Click into the input filed sets input focus and opens the dropdown
• typing will enter a value and filter the list of matching items
• typeahead will autocomplete existing items to the next matching item
• On lost focus, only a valid input will be kept, invalid input will be flushed
• Pressing Enter with autocomplete proposal means accept proposal -> same proposal/item should be highlighted in the filtered dropdown list
• Pressing Enter after typing a string, that is not in the list of valid items means "Add as new item" -> in the dropdown list the "+ [input]" should be highlighted

Keyboard navigation

• On entering the Select via focus tabbing, use the same behavior as above without automaticlaly open the dropdown
• Dropdown can be opened using Alt/Option Down
• Close dropdown wtih Alt/Option Up or Esc

[silviowolf]

UX Weekly 2023-02-16: Editable = false:

• separate actual input and search input
• search/filter input should happen inside the dropdown not in the select input field
• state "No matching items" if filter has no matches

Editable = true:

• same behavior as above but list can be enhanced with user defined values ("+ add ")

Multiselect = true:

• do not auto-close list after item selection

[nuke-ellington]

[IX-933]

[alex50105]

so is it fixed now? this is really a big usability concern for us, so much that we added workarounds to prevent users from tying in the select.

[danielleroux]

so is it fixed now? this is really a big usability concern for us, so much that we added workarounds to prevent users from tying in the select.

Can you please contact us via [email protected] to discuss your concerns.