ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

Internal issue 2929 - IcSearchBar issue providing suggestions with low character numbers and async retrieved options and does not allow characters until suggestions 0

Open ticket-sync[bot] opened this issue 1 year ago • 3 comments

Stackblitz Example This is a code demo that emulates options being retrieved as the user types into the search. Here the options are not retrieved and shown until at least one search has completed. It also shows that you cannot specify 0 as a {{charactersUntilSuggestion}} value (or at least does not work as expected)

ticket-sync[bot] avatar Nov 20 '24 15:11 ticket-sync[bot]

I have asked the customer internally to give more details on this issue

GCHQ-Developer-847 avatar Feb 11 '25 17:02 GCHQ-Developer-847

As clarified with the customer, the two main issues in more detail are as follows:


Issue 1

  1. In the first search bar in the StackBlitz, after the initial page load, type in one letter. See that the dropdown menu is not displayed.
  2. Type in another letter. See that the dropdown menu is now displayed.
  3. Delete the second letter. See that the dropdown menu is displayed, even though there is one letter in the search bar - and when there was one letter in Step 1, the dropdown menu was not displayed at all.

(Or you can delete the first letter and type it again)

Basically there is inconsistent behaviour with when options start appearing between the initial page load and once the user starts interacting with the search bar, when asynchronous loading, i.e. the loading prop, is used.


Issue 2

The customer expected that when you set characterUntilSuggestion to 0, it would make the options display when you click or focus on the search bar while it is empty. I agree that this is a reasonable request - if you go to google.co.uk and click on the search bar, it shows suggested options, so developers may want to do something similar.

GCHQ-Developer-847 avatar Feb 12 '25 18:02 GCHQ-Developer-847

Linked ticket

gd2910 avatar Feb 13 '25 10:02 gd2910

Created a PR but only for "Issue 2" mentioned in the above comment.

This is to make the work more manageable as that first issue seems to be quite a bit more involved. I found that the behaviour in v3 is different now for the first search bar in the StackBlitz (see equivalent StackBlitz but using v3). When I start typing, it now seems to just show the loading state (usually after 3 or 4 characters) and never leaves the loading state.

I tried editing the External Filtering story in Storybook to try and get it to work with charactersUntilSuggestion set to 0 but kept having issues where every time I try to change the code, Storybook would error out and I would have to restart it to test my changes, making it very time-consuming to actually try and get things working.

It's possible the changes in my PR have fixed "Issue 1" as well. I think the easiest thing to do would be wait until those changes are released and try the same StackBlitz using the latest release. I will do this and open another ticket if there are still issues.

GCHQ-Developer-847 avatar Jun 04 '25 11:06 GCHQ-Developer-847