Lastor
@Lastor
說
Thu, Nov 14, 2024 5:22 AM
1
coding 長知識了，碰到一個神奇問題。當兩個 Dialog Modal 同時開啟時，第二個被打開的如果裡面有 input，他會無法被聚焦，也就是滑鼠點他會點不進輸入框
Focusing input on nested Dialog · Issue #3137 · tail...
Lastor
@Lastor
Thu, Nov 14, 2024 5:23 AM
這個問題在用別人的 Dialog lib 才比較有可能會碰到
Lastor
@Lastor
Thu, Nov 14, 2024 5:24 AM
因為他們們會去做一些 focus 相關處理，讓 Dialog 被開啟時，可以把 focus 鎖定住，讓 user 可以透過 tab 切換聚焦裡面的任何 input，而不會聚焦到 Dialog 以外的元素上
Lastor
@Lastor
Thu, Nov 14, 2024 5:24 AM
雖然我不知道這件事情是怎麼做到的......
Lastor
@Lastor
Thu, Nov 14, 2024 5:25 AM
而我這邊是用 headlessUI，這邊給出的解法是，把 Dialog 包成巢狀就好
Lastor
@Lastor
Thu, Nov 14, 2024 5:26 AM
另外還有查到 Bootstrap 也有這問題，那邊則是有個 API 可以去關掉 foucs 鎖定
Lastor
@Lastor
Thu, Nov 14, 2024 5:27 AM
不過這讓我很好奇，這應該也是 js 有的 API，但到底是用哪個 API 做的? 是用什麼原理做的? 不知道這個技術名稱叫啥，只用 focus 這個關鍵字去查都查不太到
Lastor
@Lastor
Thu, Nov 14, 2024 5:31 AM
=========
有了有了，看起來原理是用很粗暴的方式做的......
How to lock focus in a Dialog?
Lastor
@Lastor
Thu, Nov 14, 2024 5:33 AM
但這個好像跟 headlessUI Dialog 的情況不太一樣，他不是 tab 被控住，而是滑鼠點擊第二個 Dialog 上的 input，會無法被 focus
Lastor
@Lastor
Thu, Nov 14, 2024 5:34 AM
一定要點一下 Dialog body 除了 input 以外的地方，然後再去點 input 才能被 focus 到
載入新的回覆