Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions resources/js/components/ui/Stack/Stack.vue
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,24 @@ function cleanup() {
escBinding.value?.destroy();
}

function forwardKeyboardShortcuts(event) {
// Allow document-level keyboard shortcuts (like Cmd+S for save) to propagate
if ((event.metaKey || event.ctrlKey) && (event.key === 's' || event.key === 'return' || event.key === 'Return')) {
// Dispatch a new event at the document level to ensure global handlers see it
const shortcutEvent = new KeyboardEvent(event.type, {
key: event.key,
code: event.code,
metaKey: event.metaKey,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
bubbles: true,
cancelable: true,
});
document.dispatchEvent(shortcutEvent);
}
}

watch(
() => props.open,
(value) => value ? open() : close(),
Expand Down Expand Up @@ -253,6 +271,7 @@ provide('closeStack', close);
size === 'full' ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
{ '-translate-x-4 rtl:translate-x-4': isHovering && !isStackEntering }
]"
@keydown="forwardKeyboardShortcuts"
>
<template v-if="shouldAddHeader">
<Header :title="title" :icon="icon">
Expand Down
82 changes: 82 additions & 0 deletions resources/js/tests/components/Stack.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { mount, flushPromises } from '@vue/test-utils';
import { expect, test, vi } from 'vitest';
import Stack from '@/components/ui/Stack/Stack.vue';

test('Stack forwards Cmd+S keyboard shortcut to document', async () => {
const documentSpy = vi.spyOn(document, 'dispatchEvent');

const wrapper = mount(Stack, {
props: {
open: true,
title: 'Test Stack',
},
slots: {
default: 'Test content',
},
global: {
stubs: {
Teleport: true,
},
},
});

await flushPromises();

// Find the stack-content div
const stackContent = wrapper.find('.stack-content');
expect(stackContent.exists()).toBe(true);

// Trigger Cmd+S keydown event
const event = new KeyboardEvent('keydown', {
key: 's',
code: 'KeyS',
metaKey: true,
bubbles: true,
cancelable: true,
});

stackContent.element.dispatchEvent(event);

// Check if dispatchEvent was called (forwarding the shortcut)
expect(documentSpy).toHaveBeenCalled();

documentSpy.mockRestore();
});

test('Stack does not forward non-shortcut keys', async () => {
const documentSpy = vi.spyOn(document, 'dispatchEvent');

const wrapper = mount(Stack, {
props: {
open: true,
title: 'Test Stack',
},
slots: {
default: 'Test content',
},
global: {
stubs: {
Teleport: true,
},
},
});

await flushPromises();

const stackContent = wrapper.find('.stack-content');

// Trigger a regular keydown event
const event = new KeyboardEvent('keydown', {
key: 'a',
code: 'KeyA',
bubbles: true,
cancelable: true,
});

stackContent.element.dispatchEvent(event);

// Check that dispatchEvent was not called for regular keys
expect(documentSpy).not.toHaveBeenCalled();

documentSpy.mockRestore();
});
Loading