PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix composer focus after pasting (#7181)

Browse source
This commit is contained in:
Germain 2021-11-22 17:09:16 +00:00 committed by GitHub
parent ea25f74714
commit 7658187186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/structures/LoggedInView.tsx
View file

@ -76,11 +76,8 @@ import LegacyCommunityPreview from "./LegacyCommunityPreview";
// NB. this is just for server notices rather than pinned messages in general. // NB. this is just for server notices rather than pinned messages in general.
const MAX_PINNED_NOTICES_PER_ROOM = 2; const MAX_PINNED_NOTICES_PER_ROOM = 2;
function canElementReceiveInput(el) { function getInputableElement(el: HTMLElement): HTMLElement | null {
return el.tagName === "INPUT" || return el.closest("input, textarea, select, [contenteditable=true]");
el.tagName === "TEXTAREA" ||
el.tagName === "SELECT" ||
!!el.getAttribute("contenteditable");
} }
interface IProps { interface IProps {
@ -416,14 +413,12 @@ class LoggedInView extends React.Component<IProps, IState> {
}; };
private onPaste = (ev: ClipboardEvent) => { private onPaste = (ev: ClipboardEvent) => {
let canReceiveInput = false; const element = ev.target as HTMLElement;
let element = ev.currentTarget; const inputableElement = getInputableElement(element);
// test for all parents because the target can be a child of a contenteditable element
while (!canReceiveInput && element) { if (inputableElement) {
canReceiveInput = canElementReceiveInput(element); inputableElement.focus();
element = element.parentElement; } else {
}
if (!canReceiveInput) {
// refocusing during a paste event will make the // refocusing during a paste event will make the
// paste end up in the newly focused element, // paste end up in the newly focused element,
// so dispatch synchronously before paste happens // so dispatch synchronously before paste happens
@ -580,7 +575,7 @@ class LoggedInView extends React.Component<IProps, IState> {
// If the user is entering a printable character outside of an input field // If the user is entering a printable character outside of an input field
// redirect it to the composer for them. // redirect it to the composer for them.
if (!isClickShortcut && isPrintable && !canElementReceiveInput(ev.target)) { if (!isClickShortcut && isPrintable && !getInputableElement(ev.target as HTMLElement)) {
// synchronous dispatch so we focus before key generates input // synchronous dispatch so we focus before key generates input
dis.fire(Action.FocusSendMessageComposer, true); dis.fire(Action.FocusSendMessageComposer, true);
ev.stopPropagation(); ev.stopPropagation();

4
src/components/views/messages/MessageActionBar.tsx
View file

@ -196,6 +196,10 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
private onThreadClick = (): void => { private onThreadClick = (): void => {
dispatchShowThreadEvent(this.props.mxEvent); dispatchShowThreadEvent(this.props.mxEvent);
dis.dispatch({
action: Action.FocusSendMessageComposer,
context: TimelineRenderingType.Thread,
});
}; };
private onEditClick = (ev: React.MouseEvent): void => { private onEditClick = (ev: React.MouseEvent): void => {