[material-ui][Autocomplete] With limit in `createFilterOptions` doesn't highlight/retain selected value

[dimon82]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-cwz2kb?file=Demo.tsx

Steps:

1. Select Inception or any movie from top 20 (limit is set to 20)
2. Go back to autocomplete to open popup - notice Inception is selected and highlighted
3. Select Alien or any movie outside top 20
4. Go back to autocomplete to open popup - notice Alien is not highlighted and nowhere to be found in the list of options until you start typing

Current behavior

Selected value is not retained/highlighted/not in the list when you click the autocomplete to reopen popup and the value is outside of top [limit value]

Expected behavior

When limit in createFilterOptions is set make sure that filtered options include selected value as part of suggestions/options when you reopen popup.

Context

I have a list of thousands of options for autocomplete for user to choose from. I'm using limit to better optimize component render. User chooses a value from the list which is outside of the limit and proceeds to go fill out other fields, then they come back to change autocomplete value and the list of options it shows starts from the very beginning and doesn't include previously selected value.

Your environment

Search keywords: autocomplete filterOptions createFilterOptions limit

[ZeeshanTamboli]

Select Alien or any movie outside top 20

How are you able to select a movie outside of the limit value? I can't select it in the provided StackBlitz reproduction.

[dimon82]

Select Alien or any movie outside top 20

How are you able to select a movie outside of the limit value? I can't select it in the provided StackBlitz reproduction.

huh? limit setting just reduces the number of options to show, but it doesn't filter actual list of options that is passed in to autocomplete. I just tried and I'm still able to reproduce it in StackBlitz

update: just realized that I should've mentioned that you have to start typing it... I mean it's autocomplete after all

[ZeeshanTamboli]

But isn't it wrong that Autocomplete shows the typed option (in this case Alien), but it doesn't appear in the list when you scroll due to the createFilterOptions limit?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[dimon82]

But isn't it wrong that Autocomplete shows the typed option (in this case Alien), but it doesn't appear in the list when you scroll due to the createFilterOptions limit?

yes it is wrong, this is exactly what the bug is. I type Alien, it's shown in the list, I choose it, then go back to open popup again and Alien is no longer in the list of options even though it's "selected" and shown in textbox (until I start typing again).

[ZeeshanTamboli]

It's a bug.

[hanszeng-chn]

It's tricky. What's the correct performent?

• Only search within the top 20 films when tying on the input (May break some cases)
• Or add the selected option at the bottom dispite the filterOptions prop

Can someone tell me the answer? And I can take it on.

[ZeeshanTamboli]

@hanszeng-chn I think the first one. This:

Only search within the top 20 films when tying on the input (May break some cases)

Which cases will it break?

[dimon82]

@hanszeng-chn sorry I was out of it a bit... correct behavior is that selected option is highlighted when you open up the popup, basically behave the same way as it does when limit is not set. The only difference is that when you open up the popup with limit set it should show you limit number of options including selected one. So say you have a list of 100 items, selected option is in position 50, currently when you open up the popup it'll show you first 20 (selected option will not be shown), what it should do is should know that there is a selected option in the list and it's at position 50, so if limit is set to 20, it would show you options 40-59 or 41-60 (selected one in the middle). This way limit still works but it actually shows you your selected option instead of top 20 as it does right now.

[hanszeng-chn]

Which cases will it break?

@hanszeng-chn I think the first one. This:

Only search within the top 20 films when tying on the input (May break some cases)

Which cases will it break?

@ZeeshanTamboli We can see the description about limit in the document:

Limit the number of suggested options to be shown. For example, if config.limit is 100, only the first 100 matching options are shown. Developer may not consider it as only match the first 100 option but search from all options and only show the first 100 matching options.

[hanszeng-chn]

@hanszeng-chn sorry I was out of it a bit... correct behavior is that selected option is highlighted when you open up the popup, basically behave the same way as it does when limit is not set. The only difference is that when you open up the popup with limit set it should show you limit number of options including selected one. So say you have a list of 100 items, selected option is in position 50, currently when you open up the popup it'll show you first 20 (selected option will not be shown), what it should do is should know that there is a selected option in the list and it's at position 50, so if limit is set to 20, it would show you options 40-59 or 41-60 (selected one in the middle). This way limit still works but it actually shows you your selected option instead of top 20 as it does right now.

@dimon82 I underestand your idea, but I think this feels more like a feature. And sorry I don't think this is reasonable. You can try discuss it with others.

[ZeeshanTamboli]

Developer may not consider it as only match the first 100 option but search from all options and only show the first 100 matching options.

Yes, this is a behavior change. The filteredOptions limit works as intended, searching all options and showing the first 100 matches, not just limiting the search to the first 100 options. The description confirms this, so I think it's correct. Closing the issue. It's not a bug.

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @dimon82 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.