Vue-formulate: Array option syntax breaks mouse accessibility for boxes when `id` is missing

Created on 11 Aug 2020  路  2Comments  路  Source: wearebraid/vue-formulate

Describe the bug
Providing no id for the options breaks mouse accessibility of input boxes when using schema. According to the docs this is optional so I'm guessing it'll require a proper fix instead of just a change on the docs.

To Reproduce
Steps to reproduce the behavior:

  1. Click on any of the first group labels
  2. Due to the id attribute of every checkbox being the same, the first one always get checked (keyboard control seems to work fine)

Reproduction
https://codepen.io/hack_nug/pen/eYZpGxB

Expected behavior
Should use the options value by default if no custom id is provided. Could also accept the object syntax and check if the value is a string or an object to enable _option syntax_.

Screenshots
If applicable, add screenshots to help explain your problem.

Device information:

  • Version latest
bug ready for release

All 2 comments

ahh. youre right, with schemas this would cause an issue. Its been really hard to auto-generate unique ids for inputs that are completely deterministic. If they are even slightly stochastic it ends up breaking SSR. The fix has been to keep an incrementing index of the generated ids per route (if applicable). But schemas might not respect this properly. Good report thanks.

This is fixed in release/2.4.4 (as of this comment, not quite published yet)

Was this page helpful?
0 / 5 - 0 ratings