gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-06 18:01:05 +00:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

fix: Fix can't skip search field by tabbing (#35281)

Browse Source
This commit is contained in:
diondiondion 2025-07-07 17:10:51 +02:00 committed by GitHub
parent fdefc4d2b4
commit b5eebd4d2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/javascript/mastodon/features/compose/components/search.tsx
View File

@ -47,10 +47,6 @@ const labelForRecentSearch = (search: RecentSearch) => {
}
};
const unfocus = () => {
document.querySelector('.ui')?.parentElement?.focus();
};
const ClearButton: React.FC<{
onClick: () => void;
hasValue: boolean;
@ -107,6 +103,11 @@ export const Search: React.FC<{
}, [initialValue]);
const searchOptions: SearchOption[] = [];
const unfocus = useCallback(() => {
document.querySelector('.ui')?.parentElement?.focus();
setExpanded(false);
}, []);
if (searchEnabled) {
searchOptions.push(
{
@ -282,7 +283,7 @@ export const Search: React.FC<{
history.push({ pathname: '/search', search: queryParams.toString() });
unfocus();
},
[dispatch, history],
[dispatch, history, unfocus],
);
const handleChange = useCallback(
@ -402,7 +403,7 @@ export const Search: React.FC<{
setQuickActions(newQuickActions);
},
[dispatch, history, signedIn, setValue, setQuickActions, submit],
[signedIn, dispatch, unfocus, history, submit],
);
const handleClear = useCallback(() => {
@ -410,7 +411,7 @@ export const Search: React.FC<{
setQuickActions([]);
setSelectedOption(-1);
unfocus();
}, [setValue, setQuickActions, setSelectedOption]);
}, [unfocus]);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
@ -461,7 +462,7 @@ export const Search: React.FC<{
break;
}
},
[navigableOptions, value, selectedOption, setSelectedOption, submit],
[unfocus, navigableOptions, selectedOption, submit, value],
);
const handleFocus = useCallback(() => {
@ -481,12 +482,38 @@ export const Search: React.FC<{
}, [setExpanded, setSelectedOption, singleColumn]);
const handleBlur = useCallback(() => {
setExpanded(false);
setSelectedOption(-1);
}, [setExpanded, setSelectedOption]);
}, [setSelectedOption]);
const formRef = useRef<HTMLFormElement>(null);
useEffect(() => {
// If the search popover is expanded, close it when tabbing or
// clicking outside of it or the search form, while allowing
// tabbing or clicking inside of the popover
if (expanded) {
function closeOnLeave(event: FocusEvent | MouseEvent) {
const form = formRef.current;
const isClickInsideForm =
form &&
(form === event.target || form.contains(event.target as Node));
if (!isClickInsideForm) {
setExpanded(false);
}
}
document.addEventListener('focusin', closeOnLeave);
document.addEventListener('click', closeOnLeave);
return () => {
document.removeEventListener('focusin', closeOnLeave);
document.removeEventListener('click', closeOnLeave);
};
}
return () => null;
}, [expanded]);
return (
<form className={classNames('search', { active: expanded })}>
<form ref={formRef} className={classNames('search', { active: expanded })}>
<input
ref={searchInputRef}
className='search__input'
@ -506,7 +533,7 @@ export const Search: React.FC<{
<ClearButton hasValue={hasValue} onClick={handleClear} />
<div className='search__popout'>
<div className='search__popout' tabIndex={-1}>
{!hasValue && (
<>
<h4>