diff --git a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx index 03e50bfe219..cd34344daa0 100644 --- a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx +++ b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx @@ -28,6 +28,7 @@ import { Button } from "@patternfly/react-core/dist/js/components/Button"; import { NavigationKeysUtils } from "../keysUtils/keyUtils"; import { PopoverPosition } from "@patternfly/react-core/dist/js/components/Popover"; import "./ExpressionVariableMenu.css"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; export type OnExpressionVariableUpdated = (args: { name: string; typeRef: string | undefined }) => void; @@ -135,7 +136,11 @@ export function ExpressionVariableMenu({ const onKeyDown = useCallback( (e: React.KeyboardEvent) => { - e.stopPropagation(); + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + e.stopPropagation(); + } if (NavigationKeysUtils.isEnter(e.key)) { saveExpression(); diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 6fcadbf14f3..2ad93c85a16 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -38,6 +38,7 @@ import { BeeTableSelectionContextProvider, SELECTION_MIN_ACTIVE_DEPTH, SelectionPart, + useBeeTableSelection, useBeeTableSelectionDispatch, } from "../../selection/BeeTableSelectionContext"; import { BeeTableCellWidthsToFitDataContextProvider } from "../../resizing/BeeTableCellWidthToFitDataContext"; @@ -112,6 +113,8 @@ export function BeeTableInternal({ const tableComposableRef = useRef(null); const { currentlyOpenContextMenu } = useBoxedExpressionEditor(); + const { selectionStart, selectionEnd } = useBeeTableSelection(); + const tableRef = React.useRef(null); const hasAdditionalRow = useMemo(() => { @@ -326,6 +329,12 @@ export function BeeTableInternal({ const onKeyDown = useCallback( (e: React.KeyboardEvent) => { + // This prevents keyboard events, specially shortcuts, from being handled here because if a cell is being edited, + // we want that the shortcuts to be handled by the cell. + if (selectionStart?.isEditing || selectionEnd?.isEditing) { + return; + } + if (!enableKeyboardNavigation) { return; } @@ -505,20 +514,22 @@ export function BeeTableInternal({ } }, [ + selectionStart?.isEditing, + selectionEnd?.isEditing, enableKeyboardNavigation, currentlyOpenContextMenu, + isReadOnly, setCurrentDepth, mutateSelection, + getColumnCount, rowCount, - reactTableInstance.allColumns.length, reactTableInstance.rows.length, - getColumnCount, + reactTableInstance.allColumns.length, erase, resetSelectionAt, copy, cut, paste, - isReadOnly, ] ); diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx index 372f2578249..092d7091ca7 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx @@ -24,6 +24,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { NavigationKeysUtils } from "../../keysUtils/keyUtils"; import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext"; import "./BeeTableEditableCellContent.css"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; const CELL_LINE_HEIGHT = 20; @@ -183,7 +184,9 @@ export function BeeTableEditableCellContent({ (e) => { // When inside FEEL Input, all keyboard events should be kept inside it. // Exceptions to this strategy are handled on `onFeelKeyDown`. - if (isEditing) { + // NOTE: In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (isEditing && !(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { e.stopPropagation(); } diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx index b74592eddb2..0082accc363 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx @@ -206,7 +206,15 @@ export function BeeTableThResizable({ shouldShowColumnsInlineControls={shouldShowColumnsInlineControls} column={column} > -
+
e.stopPropagation()} + > {!isReadOnly && column.dataType && isEditableHeader ? ( void; @@ -161,7 +162,11 @@ export function EditableNodeLabel({ // Finish editing on `Enter` pressed. const onKeyDown = useCallback( (e: React.KeyboardEvent) => { - e.stopPropagation(); + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + e.stopPropagation(); + } if (e.key === "Enter") { if (!isValid) { diff --git a/packages/dmn-editor/src/feel/InlineFeelNameInput.tsx b/packages/dmn-editor/src/feel/InlineFeelNameInput.tsx index 07d1fc88f43..3c5663abf9b 100644 --- a/packages/dmn-editor/src/feel/InlineFeelNameInput.tsx +++ b/packages/dmn-editor/src/feel/InlineFeelNameInput.tsx @@ -23,6 +23,7 @@ import { DMN15_SPEC, UniqueNameIndex } from "@kie-tools/dmn-marshaller/dist/sche import { useFocusableElement } from "../focus/useFocusableElement"; import { State } from "../store/Store"; import { useDmnEditorStoreApi } from "../store/StoreContext"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; export type OnInlineFeelNameRenamed = (newName: string) => void; @@ -127,7 +128,11 @@ export function InlineFeelNameInput({ }} onKeyDown={(e) => { onKeyDown?.(e); - e.stopPropagation(); + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + e.stopPropagation(); + } if (e.key === "Enter") { e.preventDefault(); diff --git a/packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx b/packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx index 7f28ab97209..c6e1ed78a5d 100644 --- a/packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx +++ b/packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx @@ -29,6 +29,7 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext"; import { useMemo } from "react"; import { SingleNodeProperties } from "./SingleNodeProperties"; import { useExternalModels } from "../includedModels/DmnEditorDependenciesContext"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; export function BeePropertiesPanel() { const dmnEditorStoreApi = useDmnEditorStoreApi(); @@ -55,7 +56,14 @@ export function BeePropertiesPanel() { isResizable={true} minSize={"300px"} defaultSize={"500px"} - onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + onKeyDown={(e) => { + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + e.stopPropagation(); + } + }} > {shouldDisplayDecisionOrBkmProps && } diff --git a/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx b/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx index b0584882d8f..c490c0aed1b 100644 --- a/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx +++ b/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx @@ -53,6 +53,7 @@ import { useExternalModels } from "../includedModels/DmnEditorDependenciesContex import { drgElementToBoxedExpression } from "../boxedExpressions/BoxedExpressionScreen"; import { IteratorVariableCell } from "./BoxedExpressionPropertiesPanelComponents/IteratorVariableCell"; import { useSettings } from "../settings/DmnEditorSettingsContext"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; export function BoxedExpressionPropertiesPanel() { const dmnEditorStoreApi = useDmnEditorStoreApi(); @@ -109,7 +110,14 @@ export function BoxedExpressionPropertiesPanel() { isResizable={true} minSize={"300px"} defaultSize={"500px"} - onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + onKeyDown={(e) => { + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + e.stopPropagation(); + } + }} > {shouldDisplayDecisionOrBkmProps && } diff --git a/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx b/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx index 66ebf6aa595..06c1a5f079c 100644 --- a/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx +++ b/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx @@ -26,6 +26,7 @@ import { MultipleNodeProperties } from "./MultipleNodeProperties"; import { useDmnEditorStore } from "../store/StoreContext"; import { useExternalModels } from "../includedModels/DmnEditorDependenciesContext"; import "./DiagramPropertiesPanel.css"; +import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system"; export function DiagramPropertiesPanel() { const { externalModelsByNamespace } = useExternalModels(); @@ -39,7 +40,14 @@ export function DiagramPropertiesPanel() { isResizable={true} minSize={"300px"} defaultSize={"500px"} - onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + onKeyDown={(e) => { + // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled + // See https://github.com/apache/incubator-kie-issues/issues/1164 + if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) { + // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel + e.stopPropagation(); + } + }} > {selectedNodesById.size <= 0 && }