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

autocomplete: Options list can persistently lag behind query #226

Open
chrisbobbe opened this issue Jul 19, 2023 · 2 comments
Open

autocomplete: Options list can persistently lag behind query #226

chrisbobbe opened this issue Jul 19, 2023 · 2 comments
Labels
a-compose Compose box, autocomplete, attaching files/images beta feedback Things beta users have specifically asked for upstream Would benefit from work in Flutter or another upstream
Milestone
M6: Post-launch

Comments

@chrisbobbe
Copy link
Collaborator

chrisbobbe commented Jul 19, 2023 •
edited
Loading

It's normal for the options list to lag behind the query by some small amount, perhaps several milliseconds, because we do expensive filtering computations asynchronously.

The symptom here is different: for example, you type "@", and after waiting even multiple seconds, the list of @-mention autocomplete options doesn't come up. That's because RawAutocomplete updates the list with a listener on the TextEditingValue, not on the MentionAutocompleteView.

To recognize a change from one result set to another, we should have the UI listen and respond to MentionAutocompleteView, not TextEditingValue.
@chrisbobbe chrisbobbe added the a-compose Compose box, autocomplete, attaching files/images label Jul 19, 2023
@chrisbobbe chrisbobbe mentioned this issue Jul 19, 2023
Merged
@gnprice gnprice added this to the Launch milestone Jul 19, 2023
chrisbobbe added a commit to chrisbobbe/flutter that referenced this issue Jul 21, 2023
@chrisbobbe
wip RawAutocomplete: Let caller control options directly
01553db 
This isn't nearly ready for merge; it's just to demonstrate a
direction that might be helpful for zulip/zulip-flutte#226, and
perhaps also for:
  flutter#123377 (comment)

The idea (for zulip/zulip-flutte#226) is to move to a new class
RawAutocompleteController the state value for the current list of
autocomplete options. Then, to let RawAutocomplete's caller pass an
instance of that class, giving the caller control over when that
state gets updated. For us, that's better than accepting
RawAutocomplete's old behavior, where a change in the
TextEditingController was the only trigger for an update. (We want
to trigger updates when our MentionAutocompleteView changes.)

Ideally, we could add this capability to RawAutocomplete without
removing any of its current API: maybe we could make the
`controller` param optional, and I guess add asserts to try to
prevent buggy mixtures of the old and this new opt-in behavior.
Anyway, that that was way too tricky for this demo, so here I've
just ripped out all the parts where RawAutocomplete did anything
with the TextEditingController.

I think our zulip/zulip-flutter#226 doesn't create a need to control
the "selection" state, but that state is also moved to the
RawAutocompleteController class anyway. Why?
- Well, with RawAutocomplete being unaware of the text-input value,
  as mentioned in the previous paragraph, it can't listen for
  changes in that value, which it was doing before, to null out the
  selection state when the text changed. So, now we do that.
- Also, I think there's a proposal for class like this
  RawAutocompleteController to contain the selection state:
    flutter#123377 (comment)
  That comment would also have it include the highlighted state, I
  think (which the auther calls the "hovered" state). Since those
  are closely related to the options-list state, might as well
  put them there along with it.

For this demo, I hacked down the Material `Autocomplete` widget so
that zulip-flutter would build, and I haven't touched any of the
Flutter framework tests.
chrisbobbe added a commit to chrisbobbe/zulip-flutter that referenced this issue Jul 21, 2023
@chrisbobbe
wip autocomplete: Have autocomplete options update when view-model up…
3da1b7a 
…dates

This depends on my `wip-raw-autocomplete-options-demo` branch in my
Flutter fork:
  flutter/flutter@master...chrisbobbe:flutter:wip-raw-autocomplete-options-demo

Related: zulip#226
@chrisbobbe
Copy link
Collaborator Author

For a brain-dump of one possible approach, where we have RawAutocomplete grow a new feature, see discussion.

@gnprice gnprice modified the milestones: Launch, Post-launch Jul 31, 2024
@gnprice gnprice added the upstream Would benefit from work in Flutter or another upstream label Nov 22, 2024
@gnprice gnprice mentioned this issue Nov 23, 2024
Open
@chrisbobbe chrisbobbe added the beta feedback Things beta users have specifically asked for label Dec 13, 2024
@chrisbobbe
Copy link
Collaborator Author

The symptom here is different: for example, you type "@", and after waiting even multiple seconds, the list of @-mention autocomplete options doesn't come up.

A user reported this symptom in beta feedback:

Also in the beta if you put the focus in the topic input you don’t get any propositions until you type something (and then remove it to see the list of all topics).

(They saw it with topic autocomplete, not @-mention autocomplete, but we use some of the same code for both and that code is where the bug is.)

@PIG208 PIG208 mentioned this issue Dec 17, 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.
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.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 24, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
1b8cf39 
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 27, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
4b9245b 
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 27, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
3a19206 
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 zixuan@zulip.com

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

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

Fixes zulip#1121.
apoorvapendse added a commit to apoorvapendse/zulip-flutter that referenced this issue Dec 27, 2024
@apoorvapendse
autocomplete: Put best matches near input field.
08f9b96 
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 <zixuan@zulip.com>
Fixes zulip#1121.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a-compose Compose box, autocomplete, attaching files/images beta feedback Things beta users have specifically asked for upstream Would benefit from work in Flutter or another upstream
Projects
Flutter app
Status: No status
Milestone
M6: Post-launch
Development

No branches or pull requests
2 participants
@gnprice @chrisbobbe