Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Put best autocomplete matches at bottom of list, not top #1121

Open
gnprice opened this issue Dec 10, 2024 · 5 comments · May be fixed by #1131
Open

Put best autocomplete matches at bottom of list, not top #1121

gnprice opened this issue Dec 10, 2024 · 5 comments · May be fixed by #1131
Assignees
@apoorvapendse
Labels
a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design beta feedback Things beta users have specifically asked for help wanted
Milestone
M6: Post-launch

Comments

@gnprice
Copy link
Member

gnprice commented Dec 10, 2024 •
edited by alya
Loading

That way they're in easy reach. In particular when using a phone with one's thumbs, the top of the screen can often be significantly harder to reach.

Because the query is at the bottom of the screen (in the compose box) and the list of autocomplete options opens upward from there, putting the best matches at the bottom is also logical because it puts them right next to the query (the one they're the best match for).

This applies to both ComposeAutocomplete (for autocompleting @-mentions, emoji, and so on from the content input) and TopicAutocomplete (for autocompleting topics from the topic input).
@gnprice gnprice added help wanted a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design labels Dec 10, 2024
@gnprice gnprice added this to the M6: Post-launch milestone Dec 10, 2024
@gnprice gnprice added the beta feedback Things beta users have specifically asked for label Dec 10, 2024
@gnprice gnprice mentioned this issue Dec 10, 2024
Open
@apoorvapendse
Copy link

/assign

@apoorvapendse
Copy link

That way they're in easy reach. In particular when using a phone with one's thumbs, the top of the screen can often be significantly harder to reach.

I’d like to work on this @gnprice .
I’m thinking of returning a reversed list here and updating the relevant tests.

Does this approach work for you?

@gnprice
Copy link
Member Author

gnprice commented Dec 11, 2024

Sure, assigned.

That sounds like a good start, but be sure to try the case where there are more results than fit at once, and the user has to scroll. (I.e. try that in your manual testing as you develop; and in tests you write as part of the PR; and in screenshots to illustrate your changes when you send the PR.) We'll want the best results to be visible, at the bottom of the list next to the input, and the long list of less-good results to be the ones that are out of view and have to be scrolled to get to.

@apoorvapendse
Copy link

Sure.

@apoorvapendse
Copy link

apoorvapendse commented Dec 11, 2024 •
edited by PIG208
Loading

CZO

apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 11, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
83d7b26 
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.
@apoorvapendse apoorvapendse linked a pull request Dec 11, 2024 that will close this issue
Open
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 11, 2024
@apoorvapendse
autocomplete: Put best matches near input field. This commit reverses…
7049811 
… 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.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 15, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
a146a49 
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 behavior rendering behavior.

Fixes zulip#1123.
Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 16, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
bd3a205 
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.

Fixes zulip#1123.
Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 18, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
129434b 
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.

Fixes zulip#1123.
Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 18, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
b35ddbf 
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.

Fixes zulip#1121.
@apoorvapendse apoorvapendse mentioned this issue Dec 19, 2024
Open
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 19, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
df05da4 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 19, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
5ae02ae 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
66f2109 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
95f971d 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
2f522f5 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
30ec919 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
02f9bc7 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
e2bd10c 
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.

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 20, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
cd4226e 
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.

Fixes zulip#1121.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@apoorvapendse apoorvapendse

Labels
a-compose Compose box, autocomplete, attaching files/images a-design Visual and UX design beta feedback Things beta users have specifically asked for help wanted
Projects
Flutter app
Status: No status
Milestone
M6: Post-launch
Development

Successfully merging a pull request may close this issue.

autocomplete: Put best matches near input field. apoorvapendse/zulip-flutter
2 participants
@gnprice @apoorvapendse