Replace all native <select> elements in the admin panel with SearchableSelect for a consistent UI experience. This change enhances accessibility, supports RTL and dark mode, and improves the overall design by utilizing a common component. The updates include adjustments to state management and event handling to ensure seamless integration with existing functionality across various pages and components.

assets/admin/pages/PatientRecordFormPage.test.tsx

@@ -11,6 +11,16 @@ vi.mock('../lib/api', () => ({
 import { api } from '../lib/api';
 import PatientRecordFormPage from './PatientRecordFormPage';
 
+/** react-select (SearchableSelect) را با placeholder پیدا و گزینه را با متن انتخاب می‌کند. */
+async function pickSelect(placeholder: string, optionLabel: string) {
+  const ph = await screen.findByText(placeholder);
+  const control = ph.closest('div[class*="control"]') as HTMLElement;
+  const input = control.querySelector('input') as HTMLInputElement;
+  fireEvent.focus(input);
+  fireEvent.keyDown(input, { key: 'ArrowDown' });
+  fireEvent.click(await screen.findByText(optionLabel));
+}
+
 const post = api.post as ReturnType<typeof vi.fn>;
 const patch = api.patch as ReturnType<typeof vi.fn>;
 
@@ -26,7 +36,7 @@ describe('PatientRecordFormPage (تشکیل پرونده)', () => {
 
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی را وارد نمایید'), { target: { value: 'بیمار نمونه' } });
     fireEvent.change(screen.getByPlaceholderText('شماره پرونده'), { target: { value: 'P-1001' } });
-    fireEvent.change(screen.getAllByRole('combobox')[0], { target: { value: 'female' } }); // gender
+    await pickSelect('انتخاب...', 'زن'); // gender = female
     fireEvent.change(screen.getByPlaceholderText('کد ملی را وارد نمایید'), { target: { value: '1234567890' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس را وارد نمایید'), { target: { value: '09120000000' } });
     fireEvent.click(screen.getByRole('button', { name: 'ثبت اطلاعات' }));
@@ -42,7 +52,7 @@ describe('PatientRecordFormPage (تشکیل پرونده)', () => {
 
     fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی را وارد نمایید'), { target: { value: 'ب' } });
     fireEvent.change(screen.getByPlaceholderText('شماره پرونده'), { target: { value: 'P-1' } });
-    fireEvent.change(screen.getAllByRole('combobox')[0], { target: { value: 'male' } });
+    await pickSelect('انتخاب...', 'مرد');
     fireEvent.change(screen.getByPlaceholderText('کد ملی را وارد نمایید'), { target: { value: '12' } });
     fireEvent.change(screen.getByPlaceholderText('شماره تماس را وارد نمایید'), { target: { value: '09120000000' } });
     fireEvent.click(screen.getByRole('button', { name: 'ثبت اطلاعات' }));