Suggestions box location is constrained by height of browser window

[jarzac]

Hello,

In a web application, I have several typeahead widgets inside a scroller. All is working great, except that the location of the suggestions box is not displayed properly for for the widgets at the bottom when I scroll down to see them.

The ones at the top display properly:

When I have to scroll down, the ones in the bottom display the suggestions box at the limit of the original scroll position:

So I imagine that the widget is constraining its position based on the size of the window.

And if I resize the browser window after scrolling, the widgets in view will display properly.

.

[davebound]

Same issue for me

[alexeyinkin]

I got a similar issue. If the typeahead field is near the bottom of the window, the suggestion box is very short so as to fit the window: This is so even if I scroll a bit to the bottom so more of the suggestion box can be shown.

What is worse, if the field is more than one window-height off the top, I cannot get suggestions at all.

Again, if I resize the browser window afterwards, it is sized alright.

Is there any at least temporary solution? I can imagine a hack for a constant height of the suggestion box no matter what, even if it means overflow. Because currently it is ruining production while overflow solution would be at least somehow usable.

[alexeyinkin]

Nailed it after some debugging.

The size of the suggestion box is calculated in _SuggestionsBox.resize() which is called:

1. In initState().
2. On scroll (listening to Scrollable.of(context)).
3. In didChangeMetrics() (web window resize, phone rotation).
4. Manually with SuggestionsBoxController.resize().

The pre-calculated size of the would-be-shown box then waits for it to open. Many things can go wrong with this setup:

• This particular issue stems from not handling scroll correctly. My setup is a complex one. My field is in multiple nested scrollable widgets with most of them being NeverScrollableScrollPhysics. This leads to the listener not being called. So when I scroll to my near-bottom field, it is still deemed to be near the edge and a short box is shown. When I scroll to my lower field, it is deemed to be off-screen and box height is 0. I cannot tell if this happens on native as well because my mobile app has a different layout and the scroll listener is called correctly there even being in NeverScrollableScrollPhysics. If someone tests the same layouts for mobile and web, we could know if the bug is in Flutter itself in different handling of scrolling.

• If something expands or shrinks above a field, then no listener is called and its position is not recalculated. Then the pre-calculated box may no longer be accurate. I had this problem even in my mobile layout which did not have the scrolling issue.

• I can imagine this being the cause of a 'known issue' mentioned in README.md of this package: Placing TypeAheadField in widgets with animations may cause the suggestions box to resize incorrectly.

For me the solution was as simple as forking the package and calling resize() in _SuggestionsBox.open(). So the correct position is calculated not only in advance but immediately before showing the box.

I don't know the rationale for calculating it in advance. Maybe the intent was to resize even the visible box when the main window scrolls.

[alexeyinkin]

v3.2.4 fixed this for me. @jarzac @davebound can you confirm?

[davebound]

On 3.2.4 I tried commenting out my workaround, and the problem did not resurface. I downgraded to 3.2.1 and still didn't resurface. So, it looks promising that it has been fixed somewhere along the line, but I can't be sure.