From 1f2e2b75d828044ca25a1ff89235ddbf9e97caeb Mon Sep 17 00:00:00 2001
From: ashutoshkhadse <ashutoshkhadse23@gmail.com>
Date: Wed, 14 Jan 2026 09:15:48 +0530
Subject: [PATCH] autocomplete: Reset scroll position when query changes

When searching for an emoji (or other autocomplete items), scrolling
through results, and then modifying the query, the autocomplete list
would retain its scrolled position while showing new results. This
created confusing UX where results appeared cut off at the top.

Fix this by adding a ScrollController to the autocomplete ListView
and resetting the scroll position to the top whenever the query
content changes.

Fixes: #1175
---
 lib/widgets/autocomplete.dart       |  7 +++
 test/widgets/autocomplete_test.dart | 66 +++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/lib/widgets/autocomplete.dart b/lib/widgets/autocomplete.dart
index 3f88778b0b..fed984cccf 100644
--- a/lib/widgets/autocomplete.dart
+++ b/lib/widgets/autocomplete.dart
@@ -38,6 +38,7 @@ abstract class AutocompleteField<QueryT extends AutocompleteQuery, ResultT exten
 
 class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends AutocompleteResult> extends State<AutocompleteField<QueryT, ResultT>> with PerAccountStoreAwareStateMixin<AutocompleteField<QueryT, ResultT>> {
   AutocompleteView<QueryT, ResultT>? _viewModel;
+  final ScrollController _scrollController = ScrollController();
 
   void _initViewModel(QueryT query) {
     _viewModel = widget.initViewModel(context, query)
@@ -63,6 +64,10 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
       } else {
         assert(_viewModel!.acceptsQuery(newQuery));
         _viewModel!.query = newQuery;
+        // Reset scroll when query content changes
+        if (_scrollController.hasClients) {
+          _scrollController.jumpTo(0);
+        }
       }
     }
   }
@@ -96,6 +101,7 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
   void dispose() {
     widget.controller.removeListener(_handleControllerChange);
     _viewModel?.dispose(); // removes our listener
+    _scrollController.dispose();
     super.dispose();
   }
 
@@ -138,6 +144,7 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
             child: ConstrainedBox(
               constraints: const BoxConstraints(maxHeight: 300), // TODO not hard-coded
               child: ListView.builder(
+                controller: _scrollController,
                 padding: EdgeInsets.zero,
                 shrinkWrap: true,
                 itemCount: _resultsToDisplay.length,
diff --git a/test/widgets/autocomplete_test.dart b/test/widgets/autocomplete_test.dart
index d696c79220..e5ff59b820 100644
--- a/test/widgets/autocomplete_test.dart
+++ b/test/widgets/autocomplete_test.dart
@@ -503,6 +503,72 @@ void main() {
 
       debugNetworkImageHttpClientProvider = null;
     });
+
+    testWidgets('scroll position resets when query changes', (tester) async {
+      final composeInputFinder = await setupToComposeInput(tester);
+      final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+      // Add many emoji starting with 's' to ensure the list is scrollable.
+      // The autocomplete box has maxHeight of 300, so we need enough items.
+      store.setServerEmojiData(ServerEmojiData(codeToNames: {
+        '1f600': ['sa_first_item'],
+        '1f601': ['sb_second'],
+        '1f602': ['sc_third'],
+        '1f603': ['sd_fourth'],
+        '1f604': ['se_fifth'],
+        '1f605': ['sf_sixth'],
+        '1f606': ['sg_seventh'],
+        '1f607': ['sh_eighth'],
+        '1f608': ['si_ninth'],
+        '1f609': ['sj_tenth'],
+        '1f60a': ['sk_eleventh'],
+        '1f60b': ['sl_twelfth'],
+        '1f60c': ['sm_thirteenth'],
+        '1f60d': ['sn_fourteenth'],
+        '1f60e': ['so_fifteenth'],
+        '1f60f': ['sp_sixteenth'],
+        '1f610': ['sq_seventeenth'],
+        '1f611': ['sr_eighteenth'],
+        '1f612': ['ss_nineteenth'],
+        '1f613': ['sz_last_item'],
+      }));
+
+      // Enter an emoji query to show many options.
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, 'hi :');
+      await tester.enterText(composeInputFinder, 'hi :s');
+      await tester.pump();
+      await tester.pump();
+
+      // Verify the first item is visible and the last is not (needs scrolling).
+      check(find.text('sa_first_item')).findsOne();
+
+      // Find the autocomplete ListView's Scrollable.
+      final listViewFinder = find.descendant(
+        of: find.byType(Material),
+        matching: find.byType(ListView),
+      );
+      final scrollableFinder = find.descendant(
+        of: listViewFinder,
+        matching: find.byType(Scrollable));
+
+      // Scroll until the last item is visible.
+      await tester.scrollUntilVisible(find.text('sz_last_item'), 50,
+        scrollable: scrollableFinder);
+      await tester.pump();
+
+      // The last item should now be visible.
+      check(find.text('sz_last_item')).findsOne();
+
+      // Change the query; scroll should reset to top.
+      await tester.enterText(composeInputFinder, 'hi :sa');
+      await tester.pump();
+      await tester.pump();
+
+      // After query change, the first matching item should be visible at top.
+      check(find.text('sa_first_item')).findsOne();
+
+      debugNetworkImageHttpClientProvider = null;
+    });
   });
 
   group('TopicAutocomplete', () {