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 @@ -588,17 +588,35 @@ [typeaheadRegexMatches], ); + React.useEffect(() => { + if (props.inputState.typeaheadState.keepUpdatingThreadMembers) { + const setter = props.inputState.setTypeaheadState; + setter({ + frozenThreadMembers: threadMembers, + }); + } + }, [ + threadMembers, + props.inputState.setTypeaheadState, + props.inputState.typeaheadState.keepUpdatingThreadMembers, + ]); + 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); + const setter = inputState.setTypeaheadState; + setter({ + keepUpdatingThreadMembers: false, + }); - return () => setIsVisibleForAnimation(false); - }, []); + return () => { + setter({ + keepUpdatingThreadMembers: true, + }); + 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,8 @@ textCursorPositions: {}, typeaheadState: { canBeVisible: false, + keepUpdatingThreadMembers: true, + 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,8 @@ export type TypeaheadState = { +canBeVisible: boolean, + +keepUpdatingThreadMembers: boolean, + +frozenThreadMembers: $ReadOnlyArray, +moveChoiceUp: ?() => void, +moveChoiceDown: ?() => void, +close: ?() => void,