hikmettan/ihaleist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify search dialog focus and overlay behavior

Browse Source
This commit is contained in:
hikmettan
2026-09-06 15:29:22 +03:00
parent 69f687967b
commit 9b751296ed
4 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UrunAramaModal.jsx
+7 -18
View File
@@ -1,5 +1,6 @@
import { deadlineInfo } from '../services/tenderCalendar';
import React, { useState, useEffect, useRef, useId } from 'react';
import {useModalFocus} from '../hooks/useModalFocus';
import { useApp } from '../context/AppContext';
import {
X, Search, Loader2, Package, AlertTriangle, Building2, MapPin, CalendarDays, Info,
@@ -27,18 +28,14 @@ export const UrunAramaModal = () => {
isUrunAramaOpen, setIsUrunAramaOpen, setActiveTenderDetail, openSearchTender, tenders,
urunAramaBaslangic, setUrunAramaBaslangic,
} = useApp();
const modal = useRef(null);
const modalFocus=useModalFocus(isUrunAramaOpen,()=>setIsUrunAramaOpen(false));
const titleId = useId();
useEffect(() => {
if (!isUrunAramaOpen) return;
const dialog = modal.current;
const opener = (document.activeElement === document.body || dialog.contains(document.activeElement)) ? document.querySelector('[data-product-search-trigger]') : document.activeElement;
dialog.showModal();
const previous = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
dialog.close(); document.body.style.overflow = previous;
if (opener?.isConnected && opener.getClientRects().length) opener.focus();
document.body.style.overflow = previous;
};
}, [isUrunAramaOpen]);
const requestVersion = useRef(0);
@@ -128,16 +125,8 @@ export const UrunAramaModal = () => {
const havuzda = (ikn) => tenders?.find((t) => t.ikn === ikn) || null;
return (
<dialog ref={modal} aria-labelledby={titleId} onKeyDown={event => {
if (event.key !== 'Tab') return;
const elements = [...event.currentTarget.querySelectorAll('button, input, select, textarea, a[href], [tabindex]')]
.filter(element => !element.disabled && element.tabIndex >= 0 && element.getClientRects().length);
const first = elements[0], last = elements[elements.length - 1];
if (event.shiftKey && document.activeElement === first) {event.preventDefault();last?.focus();}
else if (!event.shiftKey && document.activeElement === last) {event.preventDefault();first?.focus();}
}} onCancel={(event) => {event.preventDefault();event.stopPropagation();setIsUrunAramaOpen(false);}}
onClose={() => setIsUrunAramaOpen(false)}
className="fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none border-0 flex items-center justify-center p-2 sm:p-4 bg-slate-900/75 backdrop-blur-xs animate-fade-in">
<div {...modalFocus} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}
className="fixed inset-0 z-50 m-0 h-dvh max-h-none w-full max-w-none border-0 flex items-center justify-center p-2 sm:p-4 bg-slate-900/75 backdrop-blur-xs animate-fade-in">
<div className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-4xl overflow-hidden flex flex-col max-h-[92vh]">
<div className="bg-linear-to-r from-indigo-900 via-blue-900 to-slate-900 text-white px-3 sm:px-6 py-4 flex items-center justify-between gap-2">
@@ -152,7 +141,7 @@ export const UrunAramaModal = () => {
</p>
</div>
</div>
<button autoFocus aria-label="Ürün aramasını kapat" onClick={() => setIsUrunAramaOpen(false)} className="text-slate-400 hover:text-white p-1 rounded-lg">
<button aria-label="Ürün aramasını kapat" onClick={() => setIsUrunAramaOpen(false)} className="text-slate-400 hover:text-white p-1 rounded-lg">
<X className="w-6 h-6" />
</button>
</div>
@@ -346,6 +335,6 @@ export const UrunAramaModal = () => {
)}
</div>
</div>
</dialog>
</div>
);
};