mi6 / mi6/ic-ui-kit

Select options searchable in loading state

Open
#3,506 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary of the bug
When a searchable select is in a loading state, a user can search against the current options array. The search results are shown in preference to the loadingLabel.

## 🪜 How to reproduce

1. Go to the [Stackblitz example](https://stackblitz.com/edit/stotwrhu?file=index.html&hideExplorer=1)
2. Click on the toggle loading button
4. Type something in the select input and see that the search results appear in preference to the loadingLabel
5. Delete the search string and see that the unfiltered options array appears in preference to the loadingLabel
6. Type something in the select input that doesn't match any options and see that the emptyOptionsLIstText appears in preference to the loadingLabel

## 📸 Screenshots or code

![Searchable select with options](https://github.com/user-attachments/assets/b5aaee70-6c67-44ec-92c7-c3d19f44f8de)
Searchable select with options

![Put it in a loading state - behaves as expected](https://github.com/user-attachments/assets/f8491858-59e8-4199-baad-5c142033bdf4)
Put it in a loading state - behaves as expected

![Start typing - still in a loading state but we now see the filtered options](https://github.com/user-attachments/assets/78de5ff3-2bd3-4e28-877d-9c37764b7cc0)
Start typing - still in a loading state but we now see the filtered options

![Remove search string - still in a loading state but we now see the unfiltered options array](https://github.com/user-attachments/assets/64b72eee-5f77-471b-9f95-808e26c1149a)
Remove search string - still in a loading state but we now see the unfiltered options array

![Type something that doesn't match any options - still in a loading state but we see the emptyOptionsListText](https://github.com/user-attachments/assets/c1bf13d2-9820-436b-a1be-6d4b4128efbe)
Type something that doesn't match any options - still in a loading state but we see the emptyOptionsListText

## 📝 Acceptance Criteria

If a select is in a loading state, the loadingLabel should always be displayed and not the options.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and trace the searchable select's rendering while its loading state is enabled. Verify the behavior for filtered, unfiltered, and unmatched input; done means loadingLabel is always displayed and options are not shown during loading.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.