Skip to content

VaModal: incorrectly focuses input  #4099

Open
@m0ksem

Description

@m0ksem

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

No one assigned

    Labels

    BUGSomething isn't workingd4: hardFast monsters, respawning turrets, templars, reavers, crusaders, and inquisitorsv3: wish to haveThis is something user want, but can live without it

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions