mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-05 15:00:30 +03:00
fix: Prevent IME-exiting Enter press from sending message on Safari
On most browsers, pressing Enter to end IME composition produces this sequence of events: * keydown (keycode 229, key Processing/Unidentified, isComposing true) * compositionend * keyup (keycode 13, key Enter, isComposing false) On Safari, the sequence is different: * compositionend * keydown (keycode 229, key Enter, isComposing false) * keyup (keycode 13, key Enter, isComposing false) This causes Safari users to mistakenly send their messages when they press Enter to confirm their choice in an IME. The workaround is to treat the next keydown with keycode 229 as if it were part of the IME composition period if it occurs within a short time of the compositionend event. Fixes #2103, but needs confirmation from a Safari user.
This commit is contained in:
parent
31c6d13fdf
commit
beff09aedb
5 changed files with 64 additions and 4 deletions
47
src/app/hooks/useComposingCheck.ts
Normal file
47
src/app/hooks/useComposingCheck.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { useCallback, useEffect } from 'react';
|
||||
import { useAtomValue, useSetAtom } from 'jotai';
|
||||
import { lastCompositionEndAtom } from '../state/lastCompositionEnd';
|
||||
|
||||
interface TimeStamped {
|
||||
readonly timeStamp: number;
|
||||
}
|
||||
|
||||
export function useCompositionEndTracking(): void {
|
||||
const setLastCompositionEnd = useSetAtom(lastCompositionEndAtom);
|
||||
|
||||
const recordCompositionEnd = useCallback(
|
||||
(evt: TimeStamped) => {
|
||||
setLastCompositionEnd(evt.timeStamp);
|
||||
},
|
||||
[setLastCompositionEnd]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('compositionend', recordCompositionEnd, { capture: true });
|
||||
return () => {
|
||||
window.removeEventListener('compositionend', recordCompositionEnd, { capture: true });
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
interface IsComposingLike {
|
||||
readonly timeStamp: number;
|
||||
readonly keyCode: number;
|
||||
readonly nativeEvent: {
|
||||
readonly isComposing?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export function useComposingCheck({
|
||||
compositionEndThreshold = 500,
|
||||
}: { compositionEndThreshold?: number } = {}): (evt: IsComposingLike) => boolean {
|
||||
const compositionEnd = useAtomValue(lastCompositionEndAtom);
|
||||
return useCallback(
|
||||
(evt: IsComposingLike): boolean =>
|
||||
evt.nativeEvent.isComposing ||
|
||||
(evt.keyCode === 229 &&
|
||||
typeof compositionEnd !== 'undefined' &&
|
||||
evt.timeStamp - compositionEnd < compositionEndThreshold),
|
||||
[compositionEndThreshold, compositionEnd]
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue