fix: creating text while color picker open (#6651)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2023-06-06 22:04:06 +02:00 committed by GitHub
parent ae7ff76126
commit 84bd9bd4ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 111 additions and 184 deletions

View file

@ -825,6 +825,14 @@ class App extends React.Component<AppProps, AppState> {
if (typeof this.props.name !== "undefined") {
name = this.props.name;
}
editingElement =
editingElement || actionResult.appState?.editingElement || null;
if (editingElement?.isDeleted) {
editingElement = null;
}
this.setState(
(state) => {
// using Object.assign instead of spread to fool TS 4.2.2+ into
@ -835,8 +843,7 @@ class App extends React.Component<AppProps, AppState> {
// or programmatically from the host, so it will need to be
// rewritten later
contextMenu: null,
editingElement:
editingElement || actionResult.appState?.editingElement || null,
editingElement,
viewModeEnabled,
zenModeEnabled,
gridSize,
@ -1347,6 +1354,12 @@ class App extends React.Component<AppProps, AppState> {
});
}
// failsafe in case the state is being updated in incorrect order resulting
// in the editingElement being now a deleted element
if (this.state.editingElement?.isDeleted) {
this.setState({ editingElement: null });
}
if (
this.state.selectedLinearElement &&
!this.state.selectedElementIds[this.state.selectedLinearElement.elementId]

View file

@ -1,4 +1,4 @@
import { isTransparent, isWritableElement } from "../../utils";
import { isInteractive, isTransparent, isWritableElement } from "../../utils";
import { ExcalidrawElement } from "../../element/types";
import { AppState } from "../../types";
import { TopPicks } from "./TopPicks";
@ -121,11 +121,14 @@ const ColorPickerPopupContent = ({
}
}}
onCloseAutoFocus={(e) => {
e.preventDefault();
e.stopPropagation();
// prevents focusing the trigger
e.preventDefault();
// return focus to excalidraw container
if (container) {
// return focus to excalidraw container unless
// user focuses an interactive element, such as a button, or
// enters the text editor by clicking on canvas with the text tool
if (container && !isInteractive(document.activeElement)) {
container.focus();
}