Autocomplete - Controls - The behavior of Read-only functionality is not as expected
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
Autocomplete - Controls - The behavior of Read-only functionality is not as expected
When the auto search field is set to Read-only, we expect the text field to be disabled where the user should not be able to enter any text in the text box and the field should only be focused when the user selects the text field.
Currently, the textbox is active and also user is able to type in search box. After entering the data user will have to give a space and "No results found" text is displayed as shown in the below screenshot:
Steps to reproduce:
- Access the storybook
- Select Autocomplete web component Default/With Option/With Custom Option
- On the canvas section, under Controls set 'Read-only' status to 'True'
- Place the cursor on the Search textbox
- Enter the required data and give a space
Expected Behavior: When the auto search field is set Read only we expect the text field to be disabled where the user should not be able to enter any text in the text box and the field should only be focused when the user selects the text field.
Current Behavior: The textbox is active and also user is able to type in search box. After entering the data user will have to give a space and "No results found" text is displayed.
Reduced test cases
No response
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome, Firefox, Microsoft Edge
Which npm package?
No response
What version of npm package are you using?
No response
Priority
Low
What product/project are you using Modus Components for?
QA
What is your team/division name?
QA
With disabled attribute set to true, the user is still able to type in the textbox by using keyboard navigation. This needs to be fixed.
Looks like the expected behavior and current behavior outlined above are accurate.
With read-only enabled you can still select new options from the list, and their value is set in the box (for both single select and multi-select).
The main change needed seems to be not allowing new selections or editing current selections in read-only mode.
Follow up, @enowak1031 why did we add read-only when we have disabled state? How can I learn more about the logic behind the decision to support both?
Not sure why we have read-only if we have disabled so that context could be helpful to understanding the intended behavior.
@prashanthr6383 Could you confirm if the item needs to remain highlighted while clicking, similar to its behavior when tabbing?