autocomplete: Put best matches near input field.

This commit reverses the list that was originally
presented to the user while showing the typeahead menu.

This makes sense since on mobile its easier to click
on options closer to the input box, i.e.
where your fingers are currently present,
instead of pressing arrow keys on a keyboard which is
true on a desktop setup.

Hence we place the best matching options
not at the top of the typeahead menu, but
instead put them at the bottom for better
reachability and convenience of the user.

Also mentions dependencies on #226 where
required.

Co-authored-by: Zixuan James Li <[email protected]>
Fixes: #1121

lib/widgets/autocomplete.dart

@@ -134,6 +134,7 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
               constraints: const BoxConstraints(maxHeight: 300), // TODO not hard-coded
               child: ListView.builder(
                 padding: EdgeInsets.zero,
+                reverse: true,
                 shrinkWrap: true,
                 itemCount: _resultsToDisplay.length,
                 itemBuilder: _buildItem))));

test/widgets/autocomplete_test.dart

@@ -177,6 +177,38 @@ void main() {
 
       debugNetworkImageHttpClientProvider = null;
     });
+
+    testWidgets('options are shown in reversed order', (tester) async {
+      final users = List.generate(8, (i) => eg.user(fullName: 'A$i', avatarUrl: 'user$i.png'));
+      final composeInputFinder = await setupToComposeInput(tester, users: users);
+      final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, 'hello @');
+      await tester.enterText(composeInputFinder, 'hello @A');
+      await tester.pump();
+      // Add an extra pump to account for any potential frame delays introduced
+      // by the post frame callback in RawAutocomplete's implementation.
+      await tester.pump();
+      final initialPosition = tester.getTopLeft(find.text(users.first.fullName)).dy;
+      // Initially, all but the last autocomplete options are visible.
+      checkUserShown(users.last, store, expected: false);
+      users.take(7).forEach((user) => checkUserShown(user, store, expected: true));
+
+      // Can't scroll down because the options grow from the bottom.
+      await tester.drag(find.byType(ListView), const Offset(0, -50));
+      await tester.pump();
+      check(tester.getTopLeft(find.text(users.first.fullName)).dy)
+        .equals(initialPosition);
+
+      // The last autocomplete option becomes visible after scrolling up.
+      await tester.drag(find.byType(ListView), const Offset(0, 200));
+      await tester.pump();
+      users.skip(1).forEach((user) => checkUserShown(user, store, expected: true));
+      checkUserShown(users.first, store, expected: false);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
   });
 
   group('emoji', () {
@@ -250,6 +282,66 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
+ testWidgets('emoji options appear in the reverse order and do not scroll down', (tester) async {
+    final composeInputFinder = await setupToComposeInput(tester);
+    final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+
+    store.setServerEmojiData(
+      ServerEmojiData(
+        codeToNames: {
+          '1f4a4': ['zzz'], // Unicode emoji for "zzz"
+          '1f52a': ['biohazard'],
+          '1f92a': ['zany_face'],
+          '1f993': ['zebra'],
+          '0030-fe0f-20e3': ['zero'],
+          '1f9d0': ['zombie'],
+          }));
+
+    await store.handleEvent(
+      RealmEmojiUpdateEvent(
+        id: 1,
+        realmEmoji: {
+          '1': eg.realmEmojiItem(emojiCode: '1', emojiName: 'buzzing')}));
+
+    final emojiNames = ['zulip', 'zany_face', 'zebra', '💤', 'zombie', 'zero', 'buzzing', 'zzz', 'biohazard'];
+
+    // Enter a query; options appear, of all three emoji types.
+    // TODO(#226): Remove this extra edit when this bug is fixed.
+    await tester.enterText(composeInputFinder, 'hi :');
+    await tester.enterText(composeInputFinder, 'hi :z');
+    await tester.pump();
+    // Add an extra pump to account for any potential frame delays introduced
+    // by the post frame callback in RawAutocomplete's implementation.
+    await tester.pump();
+
+    final firstEmojiInitialPosition = tester.getTopLeft(find.text(emojiNames[0])).dy;
+    final listViewFinder = find.byType(ListView);
+
+    emojiNames.take(8).forEach((emojiName) => check(find.text(emojiName)).findsOne());
+    check(find.text(emojiNames.last)).findsNothing();
+
+    await tester.drag(listViewFinder, const Offset(0, -50));
+    await tester.pump();
+    final firstEmojiPositionAfterScrollDown = tester.getTopLeft(find.text(emojiNames[0])).dy;
+    check(
+      because: "ListView options should not scroll down further than initial position",
+      firstEmojiInitialPosition,
+    ).equals(firstEmojiPositionAfterScrollDown);
+
+    check(
+      because: "The last emoji should not be visible before scrolling up",
+      find.text(emojiNames.last),
+    ).findsNothing();
+
+    await tester.drag(listViewFinder, const Offset(0, 50));
+    await tester.pump();
+
+    check(because: "The last emoji should be visible after scrolling up",
+      find.text(emojiNames.last)).findsOne();
+
+    debugNetworkImageHttpClientProvider = null;
+  });
+
     testWidgets('text emoji means just show text', (tester) async {
       final composeInputFinder = await setupToComposeInput(tester);
       final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);