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
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM
Unknown Object (File)
Tue, Apr 9, 2:42 AM

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
Lint Not Applicable
Unit
Tests Not Applicable

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 ↗(On Diff #20414)

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 ↗(On Diff #20414)

Shouldn't we keep this?

100 ↗(On Diff #20414)

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 ↗(On Diff #20414)

What happens when actions array becomes empty?

119–122 ↗(On Diff #20414)
125–132 ↗(On Diff #20414)
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 ↗(On Diff #20414)

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 ↗(On Diff #20414)

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

100 ↗(On Diff #20414)

I like it

105 ↗(On Diff #20414)

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 ↗(On Diff #20414)

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

105 ↗(On Diff #20414)

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 ↗(On Diff #20414)

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 ↗(On Diff #20414)

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