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.

Fixes zulip#1123.
Fixes zulip#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

@@ -246,6 +246,59 @@ void main() {
 
       debugNetworkImageHttpClientProvider = null;
     });
+testWidgets('emoji options appear in the correct rendering order', (tester) async {
+  final composeInputFinder = await setupToComposeInput(tester);
+  final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+
+  // Set up emoji data
+  store.setServerEmojiData(
+    ServerEmojiData(
+      codeToNames: {
+        '1f4a4': ['zzz', 'sleepy'], // Unicode emoji for "zzz"
+      },
+    ),
+  );
+  await store.handleEvent(
+    RealmEmojiUpdateEvent(
+      id: 1,
+      realmEmoji: {
+        '1': eg.realmEmojiItem(emojiCode: '1', emojiName: 'buzzing'),
+      },
+    ),
+  );
+
+  const zulipOptionLabel = 'zulip';
+  const zzzOptionLabel = 'zzz, sleepy';
+  const unicodeGlyph = '💤';
+  const buzzingOptionLabel = 'buzzing';
+
+  await tester.enterText(composeInputFinder, 'hi :');
+  await tester.enterText(composeInputFinder, 'hi :z');
+  await tester.pumpAndSettle();
+
+  final listViewFinder = find.byType(ListView);
+  expect(listViewFinder, findsOneWidget, reason: 'ListView should be rendered');
+
+  // Explicitly check the `reverse` property of the `ListView`
+  final listViewWidget = tester.widget<ListView>(listViewFinder);
+  expect(listViewWidget.reverse, isTrue, reason: 'ListView reverse property should be true');
+
+  final positions = [
+    find.text(zulipOptionLabel),
+    find.text(zzzOptionLabel),
+    find.text(unicodeGlyph),
+    find.text(buzzingOptionLabel),
+  ].map((finder) {
+    expect(finder, findsOneWidget, reason: 'Each emoji option should be rendered');
+    return tester.getTopLeft(finder).dy;
+  }).toList();
+
+  expect(positions[0] > positions[1], isTrue, reason: '"zzz, sleepy" should appear above "zulip" because of reverse');
+  expect(positions[1] > positions[2], isTrue, reason: '"💤" should appear above "zzz, sleepy" because of reverse');
+  expect(positions[2] > positions[3], isTrue, reason: '"buzzing" should appear above "💤" because of reverse');
+  debugNetworkImageHttpClientProvider = null;
+
+});
 
     testWidgets('text emoji means just show text', (tester) async {
       final composeInputFinder = await setupToComposeInput(tester);