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.
This commit is contained in:
parent
4025eb2b19
commit
5b040f663c
@ -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 && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user