Fix flaky search behaviour with minimized left pane

This commit is contained in:
Sylvan Mably 2024-03-08 20:08:30 -05:00
parent 3eed6cb350
commit ee4608ee04
13 changed files with 154 additions and 17 deletions

View file

@ -15,7 +15,10 @@ type PropsType = {
clearConversationSearch: () => void;
clearSearch: () => void;
disabled?: boolean;
endConversationSearch: () => void;
endSearch: () => void;
i18n: LocalizerType;
isSearchingGlobally: boolean;
onEnterKeyDown?: (
clearSearch: () => void,
showConversation: ShowConversationType
@ -31,7 +34,10 @@ export function LeftPaneSearchInput({
clearConversationSearch,
clearSearch,
disabled,
endConversationSearch,
endSearch,
i18n,
isSearchingGlobally,
onEnterKeyDown,
searchConversation,
searchTerm,
@ -46,6 +52,7 @@ export function LeftPaneSearchInput({
searchConversation?.id
);
const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
const wasSearchingGlobally = usePrevious(false, isSearchingGlobally);
useEffect(() => {
// When user chooses to search in a given conversation we focus the field for them
@ -56,7 +63,10 @@ export function LeftPaneSearchInput({
inputRef.current?.focus();
}
// When user chooses to start a new search, we focus the field
if (startSearchCounter !== prevSearchCounter) {
if (
(isSearchingGlobally && !wasSearchingGlobally) ||
startSearchCounter !== prevSearchCounter
) {
inputRef.current?.select();
}
}, [
@ -64,6 +74,8 @@ export function LeftPaneSearchInput({
prevSearchCounter,
searchConversation,
startSearchCounter,
isSearchingGlobally,
wasSearchingGlobally,
]);
const changeValue = (nextSearchTerm: string) => {
@ -82,11 +94,6 @@ export function LeftPaneSearchInput({
}
};
const clearAndFocus = () => {
clearSearch();
inputRef.current?.focus();
};
const label = searchConversation ? i18n('icu:searchIn') : i18n('icu:search');
return (
@ -98,7 +105,7 @@ export function LeftPaneSearchInput({
moduleClassName="LeftPaneSearchInput"
onBlur={() => {
if (!searchConversation && !searchTerm) {
clearSearch();
endSearch();
}
}}
onKeyDown={event => {
@ -112,10 +119,14 @@ export function LeftPaneSearchInput({
changeValue(event.currentTarget.value);
}}
onClear={() => {
if (searchConversation && searchTerm) {
changeValue('');
if (searchTerm) {
clearSearch();
inputRef.current?.focus();
} else if (searchConversation) {
endConversationSearch();
inputRef.current?.focus();
} else {
clearAndFocus();
inputRef.current?.blur();
}
}}
ref={inputRef}
@ -151,7 +162,7 @@ export function LeftPaneSearchInput({
<button
aria-label={i18n('icu:clearSearch')}
className="LeftPaneSearchInput__in-conversation-pill__x-button"
onClick={clearAndFocus}
onClick={endConversationSearch}
type="button"
/>
</div>