Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: prevent blur when selecting text (#4762)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-09-18 14:42:41 +02:00 committed by GitHub
parent a50a483d0c
commit 4484615321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/Search/Search.tsx
View File

@ -114,7 +114,6 @@ export const Search = ({
useKeyboardShortcut({ key: 'Escape' }, () => {
if (searchContainerRef.current?.contains(document.activeElement)) {
searchInputRef.current?.blur();
hideSuggestions();
}
});
const placeholder = `${customPlaceholder ?? 'Search'} (${hotkey})`;

14
frontend/src/hooks/useOnBlur.ts
View File

@ -5,24 +5,36 @@ export const useOnBlur = (
callback: () => void
): void => {
useEffect(() => {
let mouseDownInside = false;
const handleMouseDown = (event: MouseEvent) => {
mouseDownInside =
containerRef.current?.contains(event.target as Node) || false;
};
const handleBlur = (event: FocusEvent) => {
// setTimeout is used because activeElement might not immediately be the new focused element after a blur event
setTimeout(() => {
if (
!mouseDownInside &&
containerRef.current &&
!containerRef.current.contains(document.activeElement)
) {
callback();
}
// Reset the flag for the next sequence of events.
mouseDownInside = false;
}, 0);
};
document.addEventListener('mousedown', handleMouseDown);
const containerElement = containerRef.current;
if (containerElement) {
containerElement.addEventListener('blur', handleBlur, true);
}
return () => {
document.removeEventListener('mousedown', handleMouseDown);
if (containerElement) {
containerElement.removeEventListener('blur', handleBlur, true);
}