danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Emoji Picker: Fix losing focus in Safari (#1157)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-13 19:08:01 +03:00
parent 74bc1b4154
commit 16f2a3a18e
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/middle/composer/Composer.tsx
View File

@ -315,6 +315,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
const newHtml = renderText(text, ['escape_html', 'emoji_html', 'br_html'])
.join('')
.replace(/\u200b+/g, '\u200b');
if (selection.rangeCount) {
const selectionRange = selection.getRangeAt(0);
if (isSelectionInsideInput(selectionRange)) {
@ -327,17 +328,15 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
}
return;
}
}
setHtml(`${htmlRef.current!}${newHtml}`);
setHtml(`${htmlRef.current!}${newHtml}`);
if (!IS_MOBILE_SCREEN) {
// If selection is outside of input, set cursor at the end of input
requestAnimationFrame(() => {
focusEditableElement(messageInput);
});
}
} else {
setHtml(`${htmlRef.current!}${newHtml}`);
if (!IS_MOBILE_SCREEN) {
// If selection is outside of input, set cursor at the end of input
requestAnimationFrame(() => {
focusEditableElement(messageInput);
});
}
}, []);

7
src/components/middle/composer/EmojiButton.tsx
View File

@ -11,14 +11,17 @@ type OwnProps = {
};
const EmojiButton: FC<OwnProps> = ({ emoji, focus, onClick }) => {
const handleClick = useCallback(() => {
const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
// Preventing safari from losing focus on Composer MessageInput
e.preventDefault();
onClick(emoji.native, emoji.id);
}, [emoji, onClick]);
return (
<div
className={`EmojiButton ${focus ? 'focus' : ''}`}
onClick={handleClick}
onMouseDown={handleClick}
title={`:${emoji.names[0]}:`}
>
{IS_EMOJI_SUPPORTED

2
src/components/ui/Menu.tsx
View File

@ -79,7 +79,7 @@ const Menu: FC<OwnProps> = ({
}
}, [isOpen]);
const handleKeyDown = useKeyboardListNavigation(menuRef, isOpen, autoClose ? onClose : undefined);
const handleKeyDown = useKeyboardListNavigation(menuRef, isOpen, autoClose ? onClose : undefined, undefined, true);
useVirtualBackdrop(
isOpen,