Vue-formulate: Radio input not clickable when a default value is set // SSR Deterministic IDs

[SuddenDev]

So first of: Great Plugin, absolute time saver since you don't have to write the same logic over and over again! I love it!

Anyhow, I found a bug with the radio buttons: If a default value is set, you can click the label to select an option, but not the icon. Also this sometimes just seems to happen at random. Needless to say, most users would push the radio button and not the label.

Reproduction

1. Go to this page in the docs: https://vueformulate.com/guide/inputs/box/#radio
   Here it doesn't work to click the circle icons to select an option

2. Go to this page in the docs: https://vueformulate.com/guide/#double-binding
   Here clicking on the circle icon works

Expected behavior
Consistently working radio icons

Device information:

• Device: PC & OnePlus 7
• OS: Windows 10, Andorid 9
• Browser: Chrome, Firefox, Android: Chrome
• Version: Chr: 81.0.4044.129 ,FF: 76.0b8 (64-Bit), Android Chr: 81.0.4044.117

[justin-schroeder]

Ahh yes. Thanks for the bug report. I saw this surface once before too and thought it was an aberration of Hot Module Reloading. It is not — i've been able to track to down to an issue with SSR. You'll notice in your example pages if you hard reload on the page it is "broken" but if you hard reload on a different page then navigate to the that page it works. This is because the id generated for the input is not deterministic and varies between what the server pumped out and what the client is generating.

This is a common issue with SSR and component frameworks (https://github.com/facebook/react/issues/1137, https://github.com/facebook/react/issues/5867 and oodles of stack overflow to back that up). However, I think we could produce a deterministic id generator in vue formulate itself...

If you dont need SSR it shouldn't be a problem, but I'm working up a patch. Thanks for the report.

[justin-schroeder]

@SuddenDev this is now fixed in v2.2.12. Thanks!

[SuddenDev]

@justin-schroeder Thank you very much for the quick fix. I hope I can contribute some inputs or plugins down the line as well!

[SuddenDev]

@justin-schroeder Okay, so I finally got back to try this, but somehow I still end up having that bug and it also still happens on the documentation as well.

I'm using NUXT as you probably have guessed and there isnt' really a way around using it. Would you recommend using a custom solution for the box input in the meantime?

[justin-schroeder]

@SuddenDev The surefire way to avoid this is to always define your id.

<FormulateInput
  id="terms"
  type="checkbox"
  label="Accept the terms"
/>

or if using it with options field:

<FormulateInput
  id="terms"
  type="checkbox"
  :options="[
    {label: 'Apple', id: 'apple', value: 'apple'},
    {label: 'Orange', id: 'orange', value: 'orange'},
  ]"
  label="Pick a fruit"
/>

However, I'm quite confident this bug is generally fixed. Have you tried clearing your cache for vue-formulate.com? On your own project are you sure Vue Formulate is updated?

[SuddenDev]

@justin-schroeder Thanks for the quick reply. I cleared my cache, but the bug persists for me. I could reproduce it here: https://vueformulate.com/guide/inputs/types/group/#data-organization (paypal / credit card radio)

On the first request it works, but after refreshing the page, the icon becomes unclickable.
Tried it in Firefox Developer Edition and Google Chrome on Windows 10.

...
  "dependencies": {
    "@braid/vue-formulate": "^2.3.0",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/pwa": "^3.0.0-0",
    "node-sass": "^4.13.1",
    "nuxt": "^2.0.0",
    "nuxt-start": "^2.12.2",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.2.0"
  },
...

I'll setup a CodeSandbox and check if it happens there as well.

[SuddenDev]

So I used the example code from the documentation and I could reproduce the bug.
https://codesandbox.io/s/vue-formulate-test-8segh?file=/components/Attending.vue

Or does it work on your machine?

[justin-schroeder]

You're completely correct. It's an issue with the interaction between groups and box inputs. hmm...Let me see if I can fix that. In the meantime this issue is re-opened. Thanks for the great reproduction link.

[justin-schroeder]

@SuddenDev this is insane...but I think we've got it fixed. We're unsure but thinking it might be a bug in core? Fixed for now, but still investigating. Bugifix is published in v2.3.1

[SuddenDev]

@justin-schroeder Thanks! I'll test it tomorrow right away. 👍

[SuddenDev]

It works on my project and here: https://codesandbox.io/s/vue-formulate-test-8segh?file=/components/Attending.vue

Thanks again for fixing that so quickly! 🎉