Vue-formulate: "disabled" not working anymore in FormulateForm

[p-falco]

Hi there,

first of all Formuate is absolutely ACE - I wish I had something like this 5 or 6 years ago when I was strugglig with Xforms and such.

I noticed that in the latest verison (2.4.0) "disabled" is not working anymore in the FormulateForm.

https://codepen.io/p-falco/pen/yLeGdLX

We CAN use it at the item level (even in schemas), and I realize it was probably not completely intentional that it worked so well at the form level, but it was so convenient that I am wondering if you are aware it stopped working, and if you plan on fixing it (or even adding it as a documented feature).

TIA,

Emp

[titusdecali]

If you add disabled as a prop on a FormulateInput you want to disable, it works, however I can confirm it does appear to be broken when on the FormulateForm.

As a workaround, you could set a :disabled="setDisabled" prop on each individual element you want to disable, then set that programmatically in the data.

data() {
   return {
      setDisabled: true
   }
}

[justin-schroeder]

@p-falco glad you like Vue Formulate! I'm not 100% sure what was working before 2.4 with the disabled attribute? You're saying if you did <FormulateForm :disabled="true"> that disabled a whole form? Cause that would be....crazy? disabled isn't even an allowed attribute on a <form> according to the HTML5 spec I think.

[p-falco]

@p-falco glad you like Vue Formulate! I'm not 100% sure what was working before 2.4 with the disabled attribute? You're saying if you did <FormulateForm :disabled="true"> that disabled a whole form? Cause that would be....crazy? disabled isn't even an allowed attribute on a <form> according to the HTML5 spec I think.

I'm sorry we moved on with the codeline after the upgrade, and it's not terribly easy to rollback, but basically, yes. If you used :disabled="true" on the FormulateForm, it SORTA disabled all the inputs. So much in fact that we noticed the misbehavior immediately after the upgrade.

Have no idea why that worked. If you have any code pens with a 2.3 version ready, I can try to reproduce it.

[justin-schroeder]

wow, that's pretty wild haha. You can swap the formulate version on the codesandbox pretty easily:

https://codesandbox.io/s/vue-formulate-reproduction-template-p5c1i?file=/src/components/Reproduction.vue

[p-falco]

ACTUALLY, I'm embarassed, but reviewing the changes, we noticed we HAD nested a diasbled attribute in the iteration of the inputs. We also had disabled in the FormulateForm, but apparently you're right, that did nothing.

Given this, what seems to have changed between 2.3 and 2.4 is that disabled (and not :disabled="true" is not accepted at the input level, but I'm not being able to reproduce it, so I will shut up and close the issue. :-)

[A "disabled" attribute at the form level WOULD be ace, though]

[justin-schroeder]

Well don’t be embarrassed, but I'm very glad this is what it turned out to be and there wasn't some fundamental feature of html forms I was unaware of! I could see something like a disabled prop being valuable in the future too 😉

[k-slash]

It may not be very elegant to do it this way, but it works: you can add a class when you want to disable your FormulateForm and set on CSS pointer-events: none.
Here is an example

Hope it helps :-)

[hacknug]

In case anyone need to disable multiple controls at once, you should use fieldset[disabled]. That'll work as initially expected on this issue while also being spec-compliant.

Maybe groups/forms could be wrapped in a fieldset to allow introducing such functionality to the library?

[justin-schroeder]

@hacknug not opposed to the idea. Although like you point out you can always wrap your fields in a <fieldset> today. The biggest problem with fieldsets is they notoriously hard to style well and involve all kinds of hacks — kind of like <select> lists used to be.

[hacknug]

@hacknug not opposed to the idea. Although like you point out you can always wrap your fields in a <fieldset> today. The biggest problem with fieldsets is they notoriously hard to style well and involve all kinds of hacks — kind of like <select> lists used to be.

Yeah, the need for an extra wrapping div is far from ideal…