Vercel UI SDK Beta 怎麼驗收？React 清除按鈕的鍵盤與焦點測試

2026-11-13

前端

前端開發

/

React

/

測試

/

開發工具

本文目錄

用 Vercel UI SDK 接 React 元件時，可以先驗收一個容易漏掉的動作。搜尋欄的清除按鈕被鍵盤啟動後會消失，焦點應回到輸入框，使用者才能繼續輸入。在表單裡測一次，也能同時確認按鈕沒有誤觸提交。

UI SDK Beta 把狀態、事件與焦點等行為放在 @ui-sdk/core，再用 adapter 把它們接到框架。官方提供 React、Vue、Svelte、Solid 和 Web Components 的接法。以下以 React 的搜尋欄為例，採用 @ui-sdk/core 與 @ui-sdk/react 的 0.1.0-beta.1，方便重跑同一份測試。Vercel Labs UI SDK

找出哪段程式負責恢復焦點#

在既有 React 測試頁加入 README 的 searchField primitive 與 Search 元件。primitive 裡的 present 依輸入值決定按鈕是否存在，press 清空輸入值，createFocusRecovery 把輸入框指定為焦點恢復目標。React 的 createParts 將 input 與 clear 接到原生 input 和 button。整合時保留按鈕的 type="button"，並依產品情境為輸入框提供可辨識的標籤。

在真正的表單裡驗收兩次#

把元件放在有 onSubmit 計數器的表單裡，先用滑鼠點選輸入框，後續只用鍵盤。以 Enter 和 Space 各跑一次下列路徑。

欄位空白時，確認沒有清除按鈕。輸入測試文字後按 Tab，確認焦點移到清除按鈕。
按 Enter 或 Space 後，確認輸入值為空、按鈕從 DOM 移除，且 document.activeElement 是輸入框。自動化測試可等待焦點回復後再斷言。
確認 onSubmit 計數仍為零。若發生表單提交，先檢查最後渲染出的按鈕類型，再追查事件處理。

2026-11-13 用官方範例在 Chrome 157 的獨立測試頁實際執行上述路徑，兩個按鍵都通過。產品端若替換 slot、樣式或事件 handler，應在整合頁重跑，另外檢查焦點指示是否可見。這次只測搜尋欄，popup 或選單需依各自的互動規則另做驗收。