modus-web-components icon indicating copy to clipboard operation
modus-web-components copied to clipboard

Autocomplete - Controls - The behavior of Read-only functionality is not as expected

Open HarshithaNous opened this issue 2 years ago • 1 comments

Prerequisites

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: image

Steps to reproduce:

  1. Access the storybook
  2. Select Autocomplete web component Default/With Option/With Custom Option
  3. On the canvas section, under Controls set 'Read-only' status to 'True'
  4. Place the cursor on the Search textbox
  5. 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

HarshithaNous avatar May 12 '23 14:05 HarshithaNous

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.

prashanth-offcl avatar Sep 09 '24 16:09 prashanth-offcl

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.

mitch-trimble avatar Nov 06 '24 17:11 mitch-trimble

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.

mitch-trimble avatar Nov 06 '24 17:11 mitch-trimble

@prashanthr6383 Could you confirm if the item needs to remain highlighted while clicking, similar to its behavior when tabbing?

jewel-shajan avatar Nov 08 '24 09:11 jewel-shajan