Select w/filtering gets truncated

[rdowty]

If you have a select that has filtering enabled and open it near the bottom of the page the drop down will still try to open down instead of up even if it doesn't have room to display any options.

[abdhalees]

Hello Ronald,

Can you provide a reproducible example?
I cannot reproduce the issue in our demos or playground

[rdowty]

I don’t have a very clean code example but what happens is if you get the select just right near the bottom of the screen it will try to drop down when it should drop up. I think it may only happen when filtering is enabled. Here’s a screenshot to show you what it looks like. As you can see there isn’t enough room to display even a single option.

…

On Sep 7, 2022, at 5:53 AM, Abdallah AlHalees ***@***.***> wrote: Hello Ronald, Can you provide a reproducible example? I cannot reproduce the issue in our demos <https://cloudscape.design/examples/react/form.html> or playground <https://cloudscape.design/components/select/?tabId=playground&example=with-auto-filtering> — Reply to this email directly, view it on GitHub <#250 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2VDLMHI72EXGKXNMQQZT3V5BXZDANCNFSM6AAAAAAQGHIVGY>. You are receiving this because you authored the thread.

[abdhalees]

Unfortunately I can't help you much without a reproducible example, it doesn't have to be a clean code, just put the code you currently have into a codesandbox

[rdowty]

[rdowty]

Here's the code sandbox. The issue isn't easy to replicate because the position has to be just right. Here's the link to the sandbox: https://codesandbox.io/s/xenodochial-platform-zif0zt?file=/src/App.js

[rdowty]

[rdowty]

If you add a bunch of items and scroll to where the divider is just above the bottom of the page like in the screen shot above and change the focus from another select to the one at the bottom of the page it's easy to replicate.

[connorlanigan]

Hello Ronald,

the component determines its direction based on the amount of items and the available space above and below the component.
In your code, you are providing an empty list of items when the Select is opened and no text has been entered yet (line 23 in your screenshot, line 20 in your codesandbox link). Since this empty list of items takes up very little space, it is rendered below the Select's trigger rather than above.

We recommend to show the full list of items initially, and reduce that list when search text is entered. You can achieve this by removing the condition filterText !== "" && from your code.

[rdowty]

In my application the list contains about 10,000 items and they're being fetched from the API. I could get the first 20 if there's no search text but it's kind of a waste. That's a good work around but this is still a bug.

[YueyingLu]

Hi @rdowty.
Rendering no item on the first open in Select may confuse users there is no option to select. We recommend you to render at least most relevant items regarding your use case. If not possible, rely on alphanumeric ordering.

Could you also share why you need to have 10k items in one select? We have recommendation to use groups (or a cascade of selects) for large lists:

Use groups if the options belong to different categories. Also consider using groups if there are more than 16 suggestions.

[connorlanigan]

Additionally, the Select component supports asynchronous loading (see the API tab of the component's page), which you can use to load more items after the first 20 ones when your users scroll.

[rdowty]

I am doing asynchronous loading and have changed the behavior so that the first 20 items are shown when the select becomes active. The thing I don't like is having to fetch them because there is a barely non-zero chance the item you're looking for is there so it seems like a waste of bandwidth.