Forge Select: bản thay thế Select2 zero-dependency, framework-agnostic mã nguồn mở

Select2 đã phục vụ cộng đồng phát triển web hơn một thập kỷ, nhưng nó được xây trên jQuery — một ràng buộc ngày càng khó chấp nhận khi phần lớn stack hiện đại (React, Vue, Next.js, Svelte) không còn cần đến jQuery ở bất kỳ đâu khác trong ứng dụng. Kéo theo cả jQuery chỉ để có một ô select nâng cao là một sự đánh đổi không còn hợp lý. Forge Select là câu trả lời của chúng tôi: một component select/combobox framework-agnostic, zero runtime dependency, viết bằng TypeScript thuần, có thể dùng trực tiếp trong vanilla JS hoặc qua wrapper chính thức cho React/Vue.

Toàn bộ core chỉ 5 file — tối giản có chủ đích

Khác với nhiều thư viện UI phình to theo thời gian, core của Forge Select gói gọn trong đúng 5 file TypeScript: `ForgeSelect.ts` (toàn bộ logic component — dựng DOM, gắn sự kiện, quản lý trạng thái chọn, tìm kiếm/lọc, điều hướng bàn phím, virtual scroll, AJAX — trong một class duy nhất, không tách sub-component), `types.ts` (định nghĩa type công khai), `emitter.ts` (hệ thống pub/sub tối giản có type), `i18n.ts` (bảng chuỗi đa ngôn ngữ), và `index.ts` (entrypoint công khai duy nhất). Zero runtime dependency là một ràng buộc cứng của dự án — `package.json` không có mục `dependencies` nào cả, chỉ `devDependencies` cho công cụ build/test. Thêm dev dependency mới thì được, nhưng không bao giờ thêm runtime dependency.

Bộ tính năng đủ cho sản phẩm thật, không chỉ demo

• **Rich item rendering** — mỗi option có thể hiển thị avatar, label, và description, với các field dựng sẵn render qua `textContent`/`createElement` để an toàn trước XSS ngay từ thiết kế
• **Virtual scrolling tự động** — kích hoạt khi danh sách vượt quá 100 dòng, kèm cơ chế cache render theo FIFO để mỗi template chỉ chạy một lần cho mỗi option, giữ hiệu năng ổn định với danh sách hàng nghìn item
• **Tree select** — chỉ cần thêm `children` vào một option để có node mở rộng/thu gọn, chọn nhiều theo tầng cha-con (cascading), với trạng thái indeterminate cho node cha chỉ được chọn một phần
• **Tags mode và kéo-thả sắp xếp** — `allowCreate` cho phép tạo option mới từ text tự do; với chế độ multiple, người dùng có thể kéo-thả sắp xếp lại thứ tự tag bằng chuột/cảm ứng/bút hoặc phím tắt Alt+mũi tên, đồng bộ luôn thứ tự trong `<select multiple>` gốc để form submit ra đúng thứ tự đã kéo
• **AJAX và phân trang** — tải dữ liệu từ xa có debounce sẵn, hỗ trợ infinite-scroll pagination, dùng một `ajaxRequestId` tăng dần để loại bỏ response trả về muộn không còn hợp lệ

Accessibility và đa ngôn ngữ không phải tính năng phụ thêm

Forge Select gắn `role="listbox"`, `aria-multiselectable` khi ở chế độ multiple, và `aria-activedescendant` điều khiển bởi chỉ số điều hướng bàn phím — đúng chuẩn ARIA combobox/listbox, không phải một lớp phủ thêm sau khi đã xây xong phần hiển thị. Đa ngôn ngữ cũng được thiết kế từ đầu: bảng chuỗi dựng sẵn có tiếng Anh và tiếng Việt, với cơ chế `format()` nội suy biến `{placeholder}` kiểu này, và có thể truyền vào một bảng chuỗi tùy chỉnh hoàn toàn nếu cần ngôn ngữ khác.

Plugin architecture và chiến lược wrapper cho framework

Mở rộng hành vi không cần fork core: một plugin là một object với các hook tùy chọn `onInit`, `onOpen`, `onClose`, `onDestroy`, chạy theo đúng thứ tự đăng ký. Với React và Vue — hai framework phổ biến nhất — chúng tôi publish wrapper chính thức riêng (`forge-select-react` với `value`/`onChange` có kiểm soát, `forge-select-vue` với `v-model`) thay vì để người dùng tự bọc. Angular và Svelte hiện chưa có wrapper chính thức — tài liệu hướng dẫn mount thủ công qua lifecycle hook, và đây là hạng mục còn nằm trên roadmap, chúng tôi không giả vờ đã xong khi chưa xong.

Vì sao một công ty dịch vụ phần mềm lại duy trì thư viện UI component

Đây là lần thứ ba trong năm nay chúng tôi mở mã nguồn một công cụ nội bộ — cùng tinh thần với Autumn Note (rich-text editor) và KonexForge Themes (bộ theme VS Code). Một ô select nâng cao là thành phần xuất hiện lặp đi lặp lại trong hầu như mọi Pilot Build có form phức tạp — quản lý danh mục sản phẩm, chọn khách hàng trong CRM của ERP Ecosystem One, hay bộ lọc dashboard nội bộ. Xây một lần, dùng lại nhiều lần, và mở mã nguồn để chính việc dùng thật qua nhiều dự án kiểm chứng chất lượng — thay vì viết riêng cho một khách hàng rồi không ai động đến nữa.

Kết luận

Forge Select giải quyết đúng bài toán Select2 từng giải quyết, nhưng với kiến trúc phù hợp cho web hiện đại: zero dependency, framework-agnostic, TypeScript strict, và đủ tính năng nâng cao (virtual scroll, tree select, tags, drag-and-drop) mà không cần đánh đổi accessibility hay bundle size. Thử trực tiếp qua demo và playground, cài qua `npm install forge-select`, hoặc xem toàn bộ mã nguồn trên GitHub — đây cũng là loại thành phần chúng tôi tái sử dụng trong lớp Development của mọi Pilot Build cần một UI component đáng tin cậy mà không phải xây lại từ đầu. Forge Select cùng các dự án mã nguồn mở khác của chúng tôi được liệt kê đầy đủ — phiên bản, giấy phép, cách đóng góp — ở trang Cộng đồng.