disabled result items

[nkostadinov]

I could not find a way to make an item from the results disabled - meaning it cannot be selected via mouse or keyboard navigation. The item is just displayed but no interaction with it should be possible. I was able to make the item not clickable but keyboard navigation is still working.

[Haroenv]

Is that a static item you want to make disabled? Do you have a sandbox of what you have up to now? I'm not really sure of the use case yet, and there might be a more fitting solution (maybe a header?)

[nkostadinov]

Hi, I created a sandbox to display the issue. I've also added a normal select box with disabled item and this is the behaviour that I want to mimick - https://codesandbox.io/s/white-leftpad-jz72s

Sometimes I want an item to be listed and discovered by the autocomplete but based on some internal logic I want to make this item UNselectable, just like a disabled item in a select control. This means that the keyboard navigation should also skip it. I currently managed to create such a behavior but it is very hacky and ugly solution. May be it's good to have this functionality inside this wonderfull autocomplete lib :)

[Haroenv]

I can see the analogy, but I can't yet see how you'd implement that on a complete app, do you hardcode which items are disabled?

[nkostadinov]

In my real world case I have a list of rss feeds to be filtered. I want to disable the items that I have already filtered but still want to show them as disabled - because the user need to know that the items are present but not eligible for selection in that particular case. Here a screenshot from our application that may be will show more clearly the use case:

[francoischalifour]

In those situations we would rather recommend to display the filters (and possibly filtered out items) either in the search box or in the panel.

We wrote a guide called Filtering Results with Tags.

[nkostadinov]

Thanks but my goal was to make the autocomplete behave as much as possible as a select control. The tags functionality is not exactly the UX i'm looking for.

[nkostadinov]

If you question is how do I determine which items to be disabled - I created a callback function in the source isDisabled(item) which returns true/false based on my custom logic - I think this is the most flexible solution.