autocomplete: Put best matches near input field. #1131

apoorvapendse · 2024-12-11T07:15:59Z

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 to navigate through the options on a keyboard which is convenient on a desktop setup.

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

CZO

Fixes #1121.

Here is a demo:
Screencast from 12-11-2024 12:38:19 PM.webm

PIG208

Thanks for the PR @apoorvapendse! Left some comment.

This doesn't fix #1123 because the emoji picker (added in #1103) is a feature separate from autocompletion, so please update the PR comment and the commit message to reflect that.

test/widgets/autocomplete_test.dart

PIG208 · 2024-12-17T21:16:35Z

test/widgets/autocomplete_test.dart

+      await tester.enterText(composeInputFinder, 'hello @A');
+      await tester.pumpAndSettle();
+      //only first seven users render initially, 8th user has to be accessed by scrolling up
+      for(int i = 0 ;i < 7 ;i++){


nit: consistent spacing (and at other places)

for (int i = 0; i < 7; i++) {

okay, I've updated so that no matches are found for //[a-z][A-Z]

bump. Looks like this still needs to be fixed:

Suggested change

for(int i = 0 ;i < 7 ;i++){

for (int i = 0; i < 7; i++) {

test/widgets/autocomplete_test.dart

apoorvapendse · 2024-12-18T03:05:48Z

Hey @PIG208, thanks for reviewing the PR.
I've updated it and hope it meets your expectations.
Could you please elaborate on what kind of comment is expected as per this comment
Thanks.

test/widgets/autocomplete_test.dart

apoorvapendse · 2024-12-19T02:14:43Z

@PIG208 thank you for clarifying ,
I don't think this is affected by #226, since the default behavior on CZO also requires you to enter :<some text> in order to trigger the emoji typehead.

Open to your feedback.
Thank you.

test/widgets/autocomplete_test.dart

apoorvapendse · 2024-12-19T17:31:42Z

Hey @PIG208,
I am sorry, did you mean to mention #226 instead of #227 in this comment.

I added a comment mentioning that dependency here in the latest commit.

Is that what was expected?

PIG208

Thanks for the update! Left some more comments. I read the first test and skimmed the second one. It looks like the current approach of getting scroll offset is not working properly.

For the next revision, please do a round of self-review addressing the style issues mentioned in the comments, and apply it to other places as well.

test/widgets/autocomplete_test.dart

PIG208 · 2024-12-19T22:35:49Z

test/widgets/autocomplete_test.dart

+      await tester.enterText(composeInputFinder, 'hello @A');
+      await tester.pumpAndSettle();
+      //only first seven users render initially, 8th user has to be accessed by scrolling up
+      for(int i = 0 ;i < 7 ;i++){


bump. Looks like this still needs to be fixed:

Suggested change

for(int i = 0 ;i < 7 ;i++){

for (int i = 0; i < 7; i++) {

test/widgets/autocomplete_test.dart

apoorvapendse · 2024-12-20T02:07:11Z

Change Summary for @PIG208

Replaced pumpAndSettle with pump
Addressed your concern regarding the removal of scrolling in the opposite direction.
Addressed your concern regarding the usefullness of scrolling.
Replaced comparing listViewFinder.dy with comparing the y position of the first emoji & mention in case of negative y offset.
See CZO topic I created for more details.
Removed ListViewFinder render checks as suggested.
Moved ListViewFinder initialization before initialScrollOffset as suggested.
Wrapped the end parens as mentioned.
Broke the check statements into multiple lines as per this input.
Removed the redundant check(because:'Each user option should be rendered (index: $i)',finder).findsOne(); as suggested.
Addressed other long line check statements.
Removed expectedUserSequence and used users instead.
Fixed other spacing issues.

Thank you for being patient.
I believe this PR is ready for another review.

apoorvapendse · 2024-12-24T02:05:22Z

Sorry for responding so late @PIG208 .
GitHub didn't send me any emails about your replies.

I've fixed the for loop formatting here, here and here.

PIG208

Thanks for the update! I revised the @-mentions test as an example of what we usually expect for testing. Please read it and try to apply the same approach to the similar test for emojis.

test/widgets/autocomplete_test.dart

apoorvapendse · 2024-12-27T02:03:57Z

Hi @PIG208,
Thank you for your review and example rewrite.
I've added the test you gave as it is, and added you as the Co-author.

Change Summary:

Made the @-mention test short similar to your example.
I also wanted to get your opinion on whether this check is redundant.
It feels redundant to me since we are already checking if the last option is rendered.

Happy to get feedback on this.
Thanks.

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. Tests have been added to verify the emoji and mention render behavior. Also mentions dependencies on zulip#226 where required. Co-authored-by: Zixuan James Li <[email protected]> Fixes zulip#1121.

apoorvapendse force-pushed the put-best-matches-near-fingers branch 3 times, most recently from a146a49 to bd3a205 Compare December 16, 2024 02:00

PIG208 reviewed Dec 17, 2024

View reviewed changes

apoorvapendse force-pushed the put-best-matches-near-fingers branch from bd3a205 to 129434b Compare December 18, 2024 03:04

apoorvapendse requested a review from PIG208 December 18, 2024 03:16

apoorvapendse force-pushed the put-best-matches-near-fingers branch from 129434b to b35ddbf Compare December 18, 2024 03:18

PIG208 reviewed Dec 18, 2024

View reviewed changes

test/widgets/autocomplete_test.dart Show resolved Hide resolved

PIG208 self-assigned this Dec 18, 2024

PIG208 added the maintainer review PR ready for review by Zulip maintainers label Dec 18, 2024

apoorvapendse requested a review from PIG208 December 19, 2024 02:17

PIG208 reviewed Dec 19, 2024

View reviewed changes

test/widgets/autocomplete_test.dart Show resolved Hide resolved

apoorvapendse force-pushed the put-best-matches-near-fingers branch from b35ddbf to df05da4 Compare December 19, 2024 17:28

apoorvapendse force-pushed the put-best-matches-near-fingers branch from df05da4 to 5ae02ae Compare December 19, 2024 17:33

PIG208 reviewed Dec 19, 2024

View reviewed changes

apoorvapendse force-pushed the put-best-matches-near-fingers branch 3 times, most recently from 95f971d to 2f522f5 Compare December 20, 2024 02:06

apoorvapendse force-pushed the put-best-matches-near-fingers branch 4 times, most recently from e2bd10c to cd4226e Compare December 20, 2024 03:24

PIG208 self-requested a review December 23, 2024 17:23

apoorvapendse force-pushed the put-best-matches-near-fingers branch from cd4226e to 1b8cf39 Compare December 24, 2024 02:01

PIG208 reviewed Dec 26, 2024

View reviewed changes

test/widgets/autocomplete_test.dart Outdated Show resolved Hide resolved

apoorvapendse force-pushed the put-best-matches-near-fingers branch from 1b8cf39 to 4b9245b Compare December 27, 2024 01:54

apoorvapendse force-pushed the put-best-matches-near-fingers branch 2 times, most recently from 3a19206 to dc1a5eb Compare December 27, 2024 02:06

apoorvapendse requested a review from PIG208 December 27, 2024 02:07

apoorvapendse force-pushed the put-best-matches-near-fingers branch from dc1a5eb to c1ac550 Compare December 27, 2024 02:08

apoorvapendse force-pushed the put-best-matches-near-fingers branch from c1ac550 to 08f9b96 Compare December 27, 2024 02:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

autocomplete: Put best matches near input field. #1131

autocomplete: Put best matches near input field. #1131

apoorvapendse commented Dec 11, 2024 •

edited

Loading

PIG208 left a comment •

edited

Loading

PIG208 Dec 17, 2024

apoorvapendse Dec 18, 2024 •

edited

Loading

PIG208 Dec 19, 2024

apoorvapendse commented Dec 18, 2024

apoorvapendse commented Dec 19, 2024

apoorvapendse commented Dec 19, 2024

PIG208 left a comment

PIG208 Dec 19, 2024

apoorvapendse commented Dec 20, 2024 •

edited

Loading

apoorvapendse commented Dec 24, 2024 •

edited

Loading

PIG208 left a comment

apoorvapendse commented Dec 27, 2024 •

edited

Loading

autocomplete: Put best matches near input field. #1131

Are you sure you want to change the base?

autocomplete: Put best matches near input field. #1131

Conversation

apoorvapendse commented Dec 11, 2024 • edited Loading

PIG208 left a comment • edited Loading

Choose a reason for hiding this comment

PIG208 Dec 17, 2024

Choose a reason for hiding this comment

apoorvapendse Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

PIG208 Dec 19, 2024

Choose a reason for hiding this comment

apoorvapendse commented Dec 18, 2024

apoorvapendse commented Dec 19, 2024

apoorvapendse commented Dec 19, 2024

PIG208 left a comment

Choose a reason for hiding this comment

PIG208 Dec 19, 2024

Choose a reason for hiding this comment

apoorvapendse commented Dec 20, 2024 • edited Loading

apoorvapendse commented Dec 24, 2024 • edited Loading

PIG208 left a comment

Choose a reason for hiding this comment

apoorvapendse commented Dec 27, 2024 • edited Loading

apoorvapendse commented Dec 11, 2024 •

edited

Loading

PIG208 left a comment •

edited

Loading

apoorvapendse Dec 18, 2024 •

edited

Loading

apoorvapendse commented Dec 20, 2024 •

edited

Loading

apoorvapendse commented Dec 24, 2024 •

edited

Loading

apoorvapendse commented Dec 27, 2024 •

edited

Loading