التنقّل بلوحة المفاتيح في قوائم الاقتراحات

أرفقوا معالج لوحة المفاتيح بحدث onKeyDown في عنصر حقل الإدخال، وليس بـonKeyPress (مهمل) أو onKeyUp. يُطلَق keyDown قبل ظهور الحرف في حقل الإدخال، مما يتيح لكم اعتراض ArrowDown وArrowUp وEnter وEscape قبل أن يكون لها أي تأثير افتراضي في المتصفح.

عندما يضغط المستخدم على ArrowDown، زيدوا selectedIndex بمقدار 1، مع تقييده بحد أقصى قدره suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). واستدعوا أيضًا e.preventDefault() لمنع المؤشر من الانتقال إلى نهاية نص حقل الإدخال، فهذا هو السلوك الافتراضي للمتصفح عند الضغط على ArrowDown في حقول النص.

عندما يضغط المستخدم على ArrowUp، أنقصوا selectedIndex بمقدار 1، مع تقييده بحد أدنى قدره 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). ويمكنكم أيضًا تقييده إلى -1 (من دون تحديد) عند الانتقال إلى ما قبل الفهرس 0، مما يتيح للمستخدم إلغاء التحديد والعودة إلى الكتابة بحرية.

عند الضغط على Enter وكان selectedIndex >= 0، حدّدوا الاقتراح المميّز: عيّنوا inputValue إلى suggestions[selectedIndex]، وأغلقوا القائمة المنسدلة، وأعيدوا ضبط selectedIndex إلى -1. وإذا لم يكن أي اقتراح مميّز (أي إن كانت قيمة selectedIndex تساوي -1)، فاسمحوا بإكمال إجراء إرسال النموذج أو البحث المعتاد.

عند الضغط على Escape، أغلقوا القائمة المنسدلة بتعيين isOpen إلى false، وأعيدوا ضبط selectedIndex إلى -1. لا تمسحوا قيمة حقل الإدخال، فالمستخدم يريد فقط إخفاء الاقتراحات دون اختيار أحدها، مع الاحتفاظ بالنص الذي كتبه لمتابعة تعديله.

عند الضغط على Tab، أغلقوا القائمة المنسدلة لأن المتصفح سينقل التركيز إلى العنصر التالي القابل للتركيز على أي حال. يضمن تعيين isOpen إلى false عند الضغط على Tab ألا تبقى القائمة المنسدلة مفتوحة بعد مغادرة التركيز لحقل الإدخال. لا حاجة إلى استدعاء preventDefault()، بل اتركوا المتصفح يتولى ترتيب التنقل الطبيعي باستخدام Tab.

يجب أن يكون الاقتراح المميّز مختلفًا بصريًا. طبّقوا نمطًا نشطًا على الاقتراح الموجود عند selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. تستخدم الحالة النشطة عادةً تغييرًا في لون الخلفية، مما يوضح العنصر الذي سيُحدّد عند الضغط على Enter.

عندما تكون لقائمة الاقتراحات قيمة قصوى للارتفاع وتكون قابلة للتمرير، قد يخرج العنصر المميّز من نطاق العرض أثناء التنقل باستخدام لوحة المفاتيح. استخدموا مصفوفة مراجع لتخزين عناصر DOM الخاصة بالاقتراحات، واستدعوا listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) كلما تغيّرت قيمة selectedIndex. تقلّل قيمة الكتلة nearest مقدار التمرير إلى الحد الأدنى.

عند تغيّر حقل الإدخال وظهور قائمة جديدة مصفّاة، أعيدوا ضبط selectedIndex إلى -1 ضمن تحديث الحالة نفسه، أو داخل useEffect يعتمد على الاقتراحات. قد تؤدي الفهارس القديمة التي تشير إلى عناصر أُزيلت إلى اختيار المستخدم اقتراحًا خاطئًا.

تدفق الاستخدام الكامل هو: يكتب المستخدم للتصفية، ثم يميّز ArrowDown العنصر الأول، وتنقله ضغطات ArrowDown الإضافية عبر القائمة، بينما يعيده ArrowUp إلى الأعلى، ويختار Enter العنصر المميّز، ويخفي Escape الاقتراحات دون تحديد. يغطي هذا جميع أنماط التفاعل القياسية باستخدام لوحة المفاتيح التي يتوقعها المستخدمون من حقل الإكمال التلقائي.

استدعوا دائمًا e.preventDefault() عند معالجة ArrowDown وArrowUp داخل حقل نصي. فمن دونه، ينقل ArrowDown مؤشر النص إلى النهاية، وينقله ArrowUp إلى البداية. وتتعارض حركات المؤشر هذه مع التنقل باستخدام فهرس التحديد، مما يؤدي إلى سلوك مربك.

ما الذي ينبغي أن يحدث عندما يضغط المستخدم على Enter مع وجود اقتراح مميّز عند selectedIndex = 2؟

تعامل مع onKeyDown في حقل الإدخال. تزيد ArrowDown قيمة selectedIndex (مع تقييدها بالحد الأقصى)، وتُنقصها ArrowUp (مع تقييدها عند 0 أو -1)، وتحدد Enter العنصر المميز، وتغلق Escape القائمة دون تحديد أي عنصر، بينما تغلق Tab القائمة وتسمح للمتصفح بنقل التركيز. استدعِ preventDefault دائمًا عند استخدام مفاتيح الأسهم، ومرّر العنصر المميز إلى منطقة العرض.