mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 13:14:58 +08:00
Fix composer focus after pasting (#7181)
This commit is contained in:
parent
ea25f74714
commit
7658187186
@ -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();
|
||||||
|
@ -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 => {
|
||||||
|
Loading…
Reference in New Issue
Block a user