diff --git a/lib/shared/typeahead-utils.js b/lib/shared/typeahead-utils.js --- a/lib/shared/typeahead-utils.js +++ b/lib/shared/typeahead-utils.js @@ -9,15 +9,13 @@ userSearchIndex: SearchIndex, threadMembers: $ReadOnlyArray, viewerID: ?string, - typedUsernamePrefix: string, + usernamePrefix: string, ): $ReadOnlyArray { - const userIDs = userSearchIndex.getSearchResults(typedUsernamePrefix); + const userIDs = userSearchIndex.getSearchResults(usernamePrefix); const usersInThread = threadOtherMembers(threadMembers, viewerID); return usersInThread - .filter( - user => typedUsernamePrefix.length === 0 || userIDs.includes(user.id), - ) + .filter(user => usernamePrefix.length === 0 || userIDs.includes(user.id)) .sort((userA, userB) => stringForUserExplicit(userA).localeCompare(stringForUserExplicit(userB)), ); 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 @@ -77,7 +77,6 @@ +suggestedUsers: $ReadOnlyArray, }; export type TypeaheadMatchedStrings = { - +entireText: string, +textBeforeAtSymbol: string, +usernamePrefix: string, }; @@ -549,7 +548,6 @@ () => typeaheadRegexMatches !== null ? { - entireText: typeaheadRegexMatches[0], textBeforeAtSymbol: typeaheadRegexMatches.groups?.textPrefix ?? '', usernamePrefix: typeaheadRegexMatches.groups?.username ?? '', diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js --- a/web/chat/typeahead-tooltip.react.js +++ b/web/chat/typeahead-tooltip.react.js @@ -24,6 +24,8 @@ function TypeaheadTooltip(props: TypeaheadTooltipProps): React.Node { const { inputState, textarea, matchedStrings, suggestedUsers } = props; + const { textBeforeAtSymbol, usernamePrefix } = matchedStrings; + const [isVisibleForAnimation, setIsVisibleForAnimation] = React.useState( false, ); @@ -34,37 +36,22 @@ return () => setIsVisibleForAnimation(false); }, []); - const { - entireText: matchedText, - textBeforeAtSymbol: matchedTextBeforeAtSymbol, - } = matchedStrings; - const actions = React.useMemo( () => getTypeaheadTooltipActions( inputState, textarea, suggestedUsers, - matchedTextBeforeAtSymbol, - matchedText, + textBeforeAtSymbol, + usernamePrefix, ), - [ - inputState, - textarea, - suggestedUsers, - matchedTextBeforeAtSymbol, - matchedText, - ], + [inputState, textarea, suggestedUsers, textBeforeAtSymbol, usernamePrefix], ); const tooltipPosition = React.useMemo( () => - getTypeaheadTooltipPosition( - textarea, - actions.length, - matchedTextBeforeAtSymbol, - ), - [textarea, actions.length, matchedTextBeforeAtSymbol], + getTypeaheadTooltipPosition(textarea, actions.length, textBeforeAtSymbol), + [textarea, actions.length, textBeforeAtSymbol], ); const tooltipPositionStyle = React.useMemo( diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js --- a/web/utils/typeahead-utils.js +++ b/web/utils/typeahead-utils.js @@ -76,8 +76,8 @@ inputState: InputState, textarea: HTMLTextAreaElement, suggestedUsers: $ReadOnlyArray, - matchedTextBefore: string, - matchedText: string, + textBeforeAtSymbol: string, + usernamePrefix: string, ): $ReadOnlyArray { return suggestedUsers .filter( @@ -86,9 +86,12 @@ .map(suggestedUser => ({ key: suggestedUser.id, onClick: () => { - const newPrefixText = matchedTextBefore; + const newPrefixText = textBeforeAtSymbol; - let newSuffixText = inputState.draft.slice(matchedText.length); + const totalMatchLength = + textBeforeAtSymbol.length + usernamePrefix.length + 1; // 1 for @ char + + let newSuffixText = inputState.draft.slice(totalMatchLength); newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText; const newText = @@ -108,11 +111,11 @@ function getTypeaheadTooltipPosition( textarea: HTMLTextAreaElement, actionsLength: number, - matchedTextBefore: string, + textBeforeAtSymbol: string, ): TooltipPosition { const { caretTopOffset, caretLeftOffset } = getCaretOffsets( textarea, - matchedTextBefore, + textBeforeAtSymbol, ); const textareaBoundingClientRect = textarea.getBoundingClientRect();