From c0ee02356ea5572b373d54ca696ca6091c78180a Mon Sep 17 00:00:00 2001 From: Andrey K Date: Fri, 9 Jun 2023 23:01:57 +0300 Subject: [PATCH] [GH-23555] Do not block global backspace key press for contenteditable's (#23626) * [GH-23555] Backspace is forbidden globally * [GH-23555] Backspace is forbidden globally (refactoring) --------- Co-authored-by: Andrey Karavashkin --- .../src/components/logged_in/logged_in.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/webapp/channels/src/components/logged_in/logged_in.tsx b/webapp/channels/src/components/logged_in/logged_in.tsx index dfc2ac9a83..01c141e8a7 100644 --- a/webapp/channels/src/components/logged_in/logged_in.tsx +++ b/webapp/channels/src/components/logged_in/logged_in.tsx @@ -15,8 +15,8 @@ import WebSocketClient from 'client/web_websocket_client.jsx'; import BrowserStore from 'stores/browser_store'; import {UserProfile} from '@mattermost/types/users'; import {Channel} from '@mattermost/types/channels'; - -const BACKSPACE_CHAR = 8; +import {isKeyPressed} from 'utils/keyboard'; +import Constants from 'utils/constants'; declare global { interface Window { @@ -205,8 +205,20 @@ export default class LoggedIn extends React.PureComponent { private handleBackSpace = (e: KeyboardEvent): void => { const excludedElements = ['input', 'textarea']; + const targetElement = e.target as HTMLElement; - if (e.which === BACKSPACE_CHAR && !(excludedElements.includes((e.target as HTMLElement).tagName.toLowerCase()))) { + if (!targetElement) { + return; + } + + const targetsTagName = targetElement.tagName.toLowerCase(); + const isTargetNotContentEditable = targetElement.getAttribute?.('contenteditable') !== 'true'; + + if ( + isKeyPressed(e, Constants.KeyCodes.BACKSPACE) && + !(excludedElements.includes(targetsTagName)) && + isTargetNotContentEditable + ) { e.preventDefault(); } };