Page MenuHomePhabricator

[web] Keyboard support for typeahead [10/13] - Create and set callback functions in tooltip component. It does not do anything yet
ClosedPublic

Authored by przemek on Dec 27 2022, 5:13 AM.
Tags
None
Referenced Files
F3379731: D6050.diff
Wed, Nov 27, 6:47 PM
Unknown Object (File)
Mon, Nov 25, 10:05 AM
Unknown Object (File)
Tue, Nov 19, 7:42 PM
Unknown Object (File)
Fri, Nov 15, 8:59 AM
Unknown Object (File)
Wed, Nov 13, 5:25 AM
Unknown Object (File)
Mon, Nov 4, 11:16 PM
Unknown Object (File)
Mon, Nov 4, 11:15 PM
Unknown Object (File)
Mon, Nov 4, 11:15 PM

Details

Summary

We create callback functions in tooltip component and save them to state in context.
I also created state for keeping information about position of currently chosen button.
User interactions (pressing buttons and hovering mouse) will use callbacks to change internal state of component.

Test Plan

Typeahead without keyboard support works.
Final tests performed in last diffs.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

Spotted bug later on, that allowed user to accept @-ing with enter when overlay was no longer visible. Clearing callbacks on unmount fixes it.

Spotted a bug: We were not setting chosen position to 0, when suggested users changed.

inka added a reviewer: tomek.

Utility function changed name.

tomek requested changes to this revision.Dec 30 2022, 9:35 AM
tomek added inline comments.
web/chat/typeahead-tooltip.react.js
39–41

Are we sure we would like to reset the selection when this array changes? Resetting like that would also be executed when any user changes - e.g. its name or role is updated.

78–80

Shouldn't we keep this?

100

Just a nit, but maybe it will be better to rename this to e.g. execute? It makes more sense to execute an action than to "onclick" it.

105

What happens when actions array becomes empty?

119–122
125–132
This revision now requires changes to proceed.Dec 30 2022, 9:35 AM
przemek marked 6 inline comments as done.

Renamed onclick to execute. Fixed nits.

web/chat/typeahead-tooltip.react.js
39–41

In diff 13/13 I solve this problem by freezing thread users that are later matched against typed prefix. So the list of users won't change when tooltip is visible. We set position to 0, when suggestion change to handle situation, when users types "@a" moves down the list and the types another letter (that causes change of suggested users).

78–80

As mentioned above, actions can never be empty or null, so it is unnecessary.

100

I like it

105

It will never be empty. Number of actions is equal to number of suggested users and we only render overlay if that number is greater than 0. Maybe I should add invariant inside of component so we are sure we work with that condition fulfilled?

tomek requested changes to this revision.Jan 4 2023, 5:59 AM
tomek added inline comments.
web/chat/typeahead-tooltip.react.js
39–41

If the purpose is to react on changed input, shouldn't we use the text as a dependency instead?

105

Invariant doesn't solve the issue which I would like to avoid: having an exception. Maybe we can wrap it with a simple if?

This revision now requires changes to proceed.Jan 4 2023, 5:59 AM
przemek added inline comments.
web/chat/typeahead-tooltip.react.js
39–41

Not really. Say we type another letter, but list of suggested users doesn't change. In this situation we don't really need to move to the top of the list. We could, but I found it unnecessary.

105

Added ifs in thos callbacks and if after all memoizations to check if component received nonempty suggestedusers array as a final check.

przemek marked 2 inline comments as done.

Responded to inlines.

Added close to accept function to simplify logic in other places in diff 11/13.

This revision is now accepted and ready to land.Jan 5 2023, 7:34 AM