diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js --- a/web/chat/chat-input-bar.react.js +++ b/web/chat/chat-input-bar.react.js @@ -595,17 +595,36 @@ [typeaheadRegexMatches], ); + React.useEffect(() => { + const setter = props.inputState.setTypeaheadState; + + if (props.inputState.typeaheadState.frozenThreadMembers.length === 0) { + setter({ + frozenThreadMembers: threadMembers, + }); + } + }, [ + threadMembers, + props.inputState.typeaheadState.frozenThreadMembers.length, + props.inputState.setTypeaheadState, + ]); + const suggestedUsers: $ReadOnlyArray = React.useMemo(() => { if (!typeaheadMatchedStrings) { return []; } return getTypeaheadUserSuggestions( userSearchIndex, - threadMembers, + props.inputState.typeaheadState.frozenThreadMembers, viewerID, typeaheadMatchedStrings.usernamePrefix, ); - }, [userSearchIndex, threadMembers, viewerID, typeaheadMatchedStrings]); + }, [ + userSearchIndex, + props.inputState.typeaheadState.frozenThreadMembers, + viewerID, + typeaheadMatchedStrings, + ]); return ( { setIsVisibleForAnimation(true); - return () => setIsVisibleForAnimation(false); - }, []); + return () => { + const setter = inputState.setTypeaheadState; + setter({ + frozenThreadMembers: [], + }); + setIsVisibleForAnimation(false); + }; + }, [inputState.setTypeaheadState]); const actions = React.useMemo( () => diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js --- a/web/input/input-state-container.react.js +++ b/web/input/input-state-container.react.js @@ -144,6 +144,7 @@ textCursorPositions: {}, typeaheadState: { canBeVisible: false, + frozenThreadMembers: [], moveChoiceUp: null, moveChoiceDown: null, close: null, diff --git a/web/input/input-state.js b/web/input/input-state.js --- a/web/input/input-state.js +++ b/web/input/input-state.js @@ -8,7 +8,7 @@ type MediaMissionStep, } from 'lib/types/media-types'; import type { RawTextMessageInfo } from 'lib/types/messages/text'; -import type { ThreadInfo } from 'lib/types/thread-types'; +import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types'; export type PendingMultimediaUpload = { localID: string, @@ -36,6 +36,7 @@ export type TypeaheadState = { +canBeVisible: boolean, + +frozenThreadMembers: $ReadOnlyArray, +moveChoiceUp: ?() => void, +moveChoiceDown: ?() => void, +close: ?() => void,