From 5b040f663c61df7ec5b76ccdfc79e344df7c4d1e Mon Sep 17 00:00:00 2001
From: igor_nadein <nadein-igor-vladimirovich@05-04-1999.ru>
Date: Sat, 28 Feb 2026 14:00:03 +0300
Subject: [PATCH] fix: Replace nested button with span in folder filter

Fixed React hydration error caused by button nested inside button.

ISSUE:
- Console error: 'In HTML, <button> cannot be a descendant of <button>'
- Folder dropdown button contained a reset filter button inside it
- This is invalid HTML and causes hydration mismatch

SOLUTION:
- Changed inner button to span element
- Added cursor-pointer for visual feedback
- Added role="button" for accessibility
- Added tabIndex={0} for keyboard navigation
- Added onKeyDown handler for Enter/Space key support
- Maintains full functionality and accessibility

LOCATION:
- frontend/src/app/documents/page.tsx:255-267
- Folder filter reset button

The fix ensures proper HTML structure while preserving all interactive functionality and accessibility features.
---
 frontend/src/app/documents/page.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/documents/page.tsx b/frontend/src/app/documents/page.tsx
index 82dd3b16..61f84e49 100644
--- a/frontend/src/app/documents/page.tsx
+++ b/frontend/src/app/documents/page.tsx
@@ -252,16 +252,25 @@ export default function DocumentsPage() {
                     {selectedFolder ? selectedFolder.name : "Все папки"}
                   </span>
                   {selectedFolderId && (
-                    <button
+                    <span
                       onClick={(e) => {
                         e.stopPropagation();
                         setSelectedFolderId(null);
                       }}
-                      className="rounded p-0.5 hover:bg-sky-200"
+                      className="rounded p-0.5 hover:bg-sky-200 cursor-pointer"
                       title="Сбросить фильтр"
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedFolderId(null);
+                        }
+                      }}
                     >
                       <X size={14} />
-                    </button>
+                    </span>
                   )}
                 </button>
                 {showFolderDropdown && (