diff --git a/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx b/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx index 61b508c8..c62a291f 100644 --- a/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx +++ b/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx @@ -23,6 +23,7 @@ import Checkbox from '../Checkbox/Checkbox' import ButtonCheckbox from '../ButtonCheckbox/ButtonCheckbox' import { coordsCanvasToPage } from '../../drawing/coordinateSystems' import Icon from '../Icon/Icon' +import checkForKeyboardKeyModifier from '../../event-listeners/osPlatformHelper' export type MapViewCreateOutcomeOwnProps = { projectId: CellIdString @@ -93,7 +94,7 @@ const MapViewCreateOutcome: React.FC = ({ const handleKeyDown = (e: KeyboardEvent) => { if (textIsFocused && e.key === 'Enter') { handleSubmit() - } else if (!textIsFocused && e.key === 'Enter' && e.metaKey) { + } else if (!textIsFocused && e.key === 'Enter' && checkForKeyboardKeyModifier(e)) { handleSubmit() } } diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts index 2b1409aa..162aec86 100644 --- a/web/src/event-listeners/index.ts +++ b/web/src/event-listeners/index.ts @@ -84,17 +84,8 @@ import { alterSiblingOrder, } from '../connections' import handleOutcomeConnectorMouseUp from '../redux/ephemeral/outcome-connector/handler' +import checkForKeyboardKeyModifier from './osPlatformHelper' -// The "modifier" key is different on Mac and non-Mac -// Pattern borrowed from TinyKeys library. -// -- -// https://github.com/jamiebuilds/tinykeys/blob/e0d23b4f248af59ffbbe52411505c3d681c73045/src/tinykeys.ts#L50-L54 -var macOsPattern = /Mac|macOS|iPod|iPhone|iPad/ -let platform = - // @ts-ignore - navigator?.userAgentData?.platform || navigator?.platform || 'unknown' -const isMacish = macOsPattern.test(platform) -const operatingSystemModifier = isMacish ? 'metaKey' : 'ctrlKey' function handleMouseUpForOutcomeForm({ state, @@ -352,7 +343,7 @@ export default function setupEventListeners( break case 'c': if ( - event[operatingSystemModifier] && + checkForKeyboardKeyModifier(event) && state.ui.selection.selectedOutcomes.length && !state.ui.outcomeForm.isOpen && !state.ui.expandedView.isOpen @@ -362,7 +353,7 @@ export default function setupEventListeners( break case 'v': if ( - event[operatingSystemModifier] && + checkForKeyboardKeyModifier(event) && state.ui.outcomeClone.outcomes.length && !state.ui.outcomeForm.isOpen && !state.ui.expandedView.isOpen diff --git a/web/src/event-listeners/osPlatformHelper.ts b/web/src/event-listeners/osPlatformHelper.ts new file mode 100644 index 00000000..c31d8e10 --- /dev/null +++ b/web/src/event-listeners/osPlatformHelper.ts @@ -0,0 +1,17 @@ + +// The "modifier" key is different on Mac and non-Mac +// Pattern borrowed from TinyKeys library. +// -- +// https://github.com/jamiebuilds/tinykeys/blob/e0d23b4f248af59ffbbe52411505c3d681c73045/src/tinykeys.ts#L50-L54 +var macOsPattern = /Mac|macOS|iPod|iPhone|iPad/ +let platform = + // @ts-ignore + navigator?.userAgentData?.platform || navigator?.platform || 'unknown' +const isMacish = macOsPattern.test(platform) +const operatingSystemModifier = isMacish ? 'metaKey' : 'ctrlKey' + +export default function checkForKeyboardKeyModifier( + event: KeyboardEvent +): boolean { + return event[operatingSystemModifier] +} \ No newline at end of file