[FEATURE] - Add New Voucher 熱鍵功能

[Julian0701]

Summary

加入熱鍵功能，讓用戶可以只用鍵盤就完成表單填寫

Tasks

預計的熱鍵

• [ ] Tab 鍵
• [ ] 方向鍵

Dependencies

No response

Other Dependencies

No response

Additional Notes

No response

[Julian0701]

ref:

• https://devtrium.com/posts/how-keyboard-shortcut
• https://dev.to/kolot/building-hotkeys-in-react-apps-2p5d
• https://github.com/jaywcjlove/react-hotkeys
• https://medium.com/@meplafi/adding-keyboard-shortcuts-to-a-react-typescript-app-using-custom-hooks-1c3e2dca2b1d

[Julian0701]

• take 3 hrs, unfinished

研究中尚未實作 目前的想法是：給每個欄位 tabIndex, 放進 array 裡面處理

[Julian0701]

• take 6 hrs, unfinished

筆記：

• 一般來說 Div 無法被 Focus，但加上 tabIndex={0} 就能 Focus 了 (但是把 tabIndex 設為 0 以外的數字就不管用了)
• 放進 array 裡 (focusableElements) 是可行的，但 currentIndex 需要改善
• Div 要設定 onFocus， 或是直接改成 Button -> 直接改成 Button ，因為 eslint 會攔截 tabIndex
• 遇到的困難：選完選單後要怎麼指向下個欄位？
  • 目前的想法是，直接把每個主要欄位的 Index 記起來，選完後直接指向下個欄位

[Julian0701]

• take 3 hrs, unfinished
• 預期把 useHotkeys 包裝成自定義 Hook，這樣就能拆分到不同 components ，再個別寫跳轉邏輯