Autocomplete with loading status is not working

[dhmacs]

Issue summary

When typing into an autocomplete field to filter out options, the options dialog collapses to a thin line.

Expected behavior

When typing into the autocomplete field the dialog should show the filtered options

Actual behavior

The options dialog collapses into a thin line

Steps to reproduce the problem

1. Go to the docs for autocomplete component https://polaris.shopify.com/components/forms/autocomplete#navigation
2. Select "Autocomplete with loading" example
3. Type into the textfield a string that matches one of the options (e.g. Rustic)

[raphpap]

To add to this: in the Autocomplete with loading example, if you type two characters quickly, the options dialog will show up.

i.e. Type re and the Refurbished option will show up. If you type r then e, it won't.

The bug also occurs without using the loading prop. Here's an example

[linxianxi]

So did I. Did anyone fix it???

[linxianxi]

@BPScott

[BPScott]

If this error still occurs on polaris.shopify.com then it sounds like it remains unfixed.
I've not got much context on Autocomplete, though I believe @dleroux was looking at improvements to it a while back.

Alternatively if you're able to identify and fix the problem we'd welcome a PR as most of the team's focus is elsewhere currently.

[dleroux]

I’m planning on improving the autocomplete but no timeline has been set for this work yet. In the meantime a PR to fix this issue would be more than welcomed.

[alainemackenzie]

@dfmcphee anything we can do to get this prioritized on the Polaris team? It seems, uh.. not great.. to have this visibly broken on our public style guide, product page tags, HS code search, etc.

@Flufd did some initial investigation, but our devs are all hustling for our Code Red deadline Oct 30th so I don't think we're able to prioritize it on cross-border team. Anyone that can help out here?

[larouxn]

👋 Hey all, just want to mention that this issue (as far as I know) affects Shopify Payments Japan's onboarding bank info section as well as it uses the same autocomplete dropdown component. Will be following this issue. 🙇‍♂️

@aya-kamikawa, @winston, @yishus, @codeAbul

[linxianxi]

I have tested it. It is the height calculation problem of the popover component. But I don't know how to fix it. The popover code is too complicated.Officials have plans to fix it？？？

[dleroux]

👋 @linxianxi I'm not sure the popover height is related to this issue. I am no longer part of the team actively working on this but I did work on something that is being looked at as a possible solution to this.

[linxianxi]

Not using Loading also causes this problem.I'm sure the popover height is related to this issue.Because I forked this library and then replace the popover in the component with the popover from another component library(antd) doesn't have this problem.

[jlyon]

We're excited to start using Polaris 6 now that it is released, but we dynamic Autocompletes in multiple places in our apps so this issue is a deal-breaker for us. We also tried diving into this code to try to fix it, but weren't able to find the right place to tie into the popover code. Is this something that is still actively being looked at? If not, could you give some pointers on where in the code to look for a solution? Thanks!

[jlyon]

We have confirmed that #4015 fixed this issue.