fix(firefox): EditableLabel reloading when pressing enter

Author: BrianUribe6

apps/front-end/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // FIXME Collaboration features not working correctly on React.StrictMode
-  reactStrictMode: true,
+  reactStrictMode: false,
 };
 
 module.exports = nextConfig;

apps/front-end/src/components/Sidebar/Category.tsx

@@ -3,7 +3,7 @@ import { registerShortcuts } from "@/lib/hotkeys";
 import * as Accordion from "@radix-ui/react-accordion";
 import clsx from "clsx";
 import { usePathname, useRouter } from "next/navigation";
-import { KeyboardEventHandler, useState } from "react";
+import { KeyboardEventHandler, MouseEvent, useState } from "react";
 import { useSnapshot } from "valtio";
 import ContextMenu from "../ContextMenu";
 import {
@@ -125,14 +125,21 @@ function Category({
   const router = useRouter();
   const eventHandlers = useSidebarEvents();
   const isActive = usePathname() === snap.href;
+  const isEditable = Boolean(editable);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    if (isEditable) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
 
-  const handleClick = () => {
     eventHandlers.onSelected?.(category);
     router.push(snap.href);
   };
 
   return (
-    <Accordion.Item value={snap.id} onKeyDown={onKeyDown}>
+    <Accordion.Item value={snap.id} onKeyDown={isEditable ? undefined : onKeyDown}>
       <Accordion.Header className="p-0.5">
         <Accordion.Trigger
           data-testid="sidebar-item"

apps/front-end/src/components/Sidebar/EditableLabel.tsx

@@ -28,8 +28,12 @@ function EditableLabel({
     else onRename?.(label);
   };
 
-  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === "Escape") {
+      // Prevent parent link/trigger activation while committing edits
+      e.preventDefault();
+      e.stopPropagation();
+    }
 
     if (e.key === "Enter") {
       handleRename();
@@ -60,7 +64,7 @@ function EditableLabel({
       ref={inputRef}
       onBlur={handleRename}
       onChange={(e) => setLabel(e.target.value)}
-      onKeyUp={handleKeyUp}
+      onKeyDown={handleKeyDown}
       placeholder="new note name..."
     />
   );