Description
When using inputs inside of a modal with custom content, we're having to click tab twice. This is a sandbox that shows the issue. https://ui.vuestic.dev/play#eNqNVUtz2zYQ/isbtgd5YlJt3ZMia9p4fEg7jTtpbmUPELmkkIAABwAZuxr99+wCfEnjPHQQhf328e3iW+qY/N62Wd9hskm2HptWCY+7XANse5HuO++Nht8KJYuPt3liWtR/mVKoPNk90G9o+LBdT65TZAD4ANDzARWFO0/JM3cwn4Yk0cFiRWCMGEwHWWJaYiU65VNReGm0i0ihhHOX7k7+j2RTwtY42vrU6I1h1k70+IZ6O0eIPncU++FmIhw6iD0Uwpapl17hzqPzoc2F7cKxMNqj9kM3bLqLlndY5QnIkqxe7BWGggNGc4xpKNGLNIWtU8bvYLuOzzSdYaojddt5UGIfpsmc4GdKPQ84PDNBtvW3An95JnD/PYE3zwQWi8B5TMNERvuoLvihMsajPSsU5TNaYJZcoYyLIxuvjz+tRYee7xapSins0xItjDL2i+AoIJv+urTv7oQucCnmEXuG6MxvFtfu4c/LTeBpnC8VOwTp0vEMo6MrrGw9UGNdSzPXNY/cBYnIpjXWw5HUxdvQ4zXrDE5QWdNAntAC58krzkId0yWFa4FbdlodTyAcCP10RQ4RDosY4JhtdYRpKzdQCeUQTuw+BkyLT0GrK7jdwZHbuVhoAr3tkOIAStx3dY2WDqep7nyZ38oTOAyxE+th1HPsEj3fuKH3sx7mVT+vvqAKoNBDUL0jp/OcWS9Uh9mPJPga/b3Chuzu9dN7Ub8VDa7yJATmCVcFqIyFVUhHmX56RY/tkDlTqGt/INPLl1eRA4CsYPUi4v/K/7JSOn5ZlBNOHhNYmaJzobmIWJKM1cPxxA/64uHQiySIiiSUXCdRRWkj2uyDM5pe+SE38Q4ASW0zVguScl4WaSfZnCcH71u3Wa87yX8XDGUl9uvRzXR+3QipKXPcKmZANb2j6VeyvqhYmKaVCu1DG9/ty8pCKfPpj2BjOV2P9uKAxcdn7B/cY6T4N78VbE+rMGGe/xLoShi+/+ctPtLvCaQt6RR5fwV8h86ojjlGt9edLon2wi+wfRMGKHX93t0/klzc2BQTDdMI/mGqd19pfaZ7k91MUzx9Bjk4gNM=
Let's have a focusable anchor for VaModal, it must be hidden div (i think so) which will be focused when VaModal mounted. User will be able to use tab to get to the next focusable element. Make sure to make hidden anchor unfocusable if focued element is inside VaModal - so we can not get back from input to invisible anchor.
Anchor migth be super simple component
Pseudocode:
const isFocusable = true
<div :tabindex="isFocusable" @blur="isFocusable = false" />
Metadata
Metadata
Assignees
Labels
Type
Projects
Status