fix: use event.code instead of event.key for keyboard shortcuts

This fixes keyboard shortcuts (Ctrl+S, Ctrl+B, Ctrl+J, Ctrl+K) not working with non-English keyboard layouts (e.g., Russian, French AZERTY, German QWERTZ).

Fixes #3495
This commit is contained in:
xob0t
2026-02-19 01:32:23 +03:00
parent b0c6b1338d
commit 1926417458
9 changed files with 25 additions and 10 deletions

View File

@@ -111,7 +111,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isLoading) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -104,7 +104,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isLoading) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -93,7 +93,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isLoading) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -85,7 +85,12 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading && isOpen) {
if (
(e.ctrlKey || e.metaKey) &&
e.code === "KeyS" &&
!isLoading &&
isOpen
) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -84,7 +84,12 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading && isOpen) {
if (
(e.ctrlKey || e.metaKey) &&
e.code === "KeyS" &&
!isLoading &&
isOpen
) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -64,7 +64,7 @@ export const SearchCommand = () => {
React.useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
if (e.code === "KeyJ" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}

View File

@@ -87,7 +87,12 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
// Add keyboard shortcut for Ctrl+S/Cmd+S
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading && !canEdit) {
if (
(e.ctrlKey || e.metaKey) &&
e.code === "KeyS" &&
!isLoading &&
!canEdit
) {
e.preventDefault();
form.handleSubmit(onSubmit)();
}

View File

@@ -9,7 +9,7 @@ export const FocusShortcutInput = (props: Props) => {
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const isMod = e.metaKey || e.ctrlKey;
if (!isMod || e.key.toLowerCase() !== "k") return;
if (!isMod || e.code !== "KeyK") return;
const target = e.target as HTMLElement | null;
if (target) {

View File

@@ -22,7 +22,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
const SIDEBAR_KEYBOARD_SHORTCUT = "KeyB";
type SidebarContext = {
state: "expanded" | "collapsed";
@@ -99,7 +99,7 @@ const SidebarProvider = React.forwardRef<
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
event.code === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();