Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] disable prop for v-form that disables all child input elements #1707

Closed
Webifi opened this issue Sep 13, 2017 · 18 comments · Fixed by #10325
Closed

[Feature Request] disable prop for v-form that disables all child input elements #1707

Webifi opened this issue Sep 13, 2017 · 18 comments · Fixed by #10325
Assignees
Labels
C: VForm S: has PR The issue has a pending Pull Request T: feature A new feature

Comments

@Webifi
Copy link
Contributor

Webifi commented Sep 13, 2017

What will it allow you to do that you can't do today?
Disable all fields in a form with one prop

How will it make current work-arounds straightforward?
Remove need to add a disabled prop to every item on a form.

What potential bugs and edge cases does it help to avoid?
Forgetting to add a disabled prop to a given form element

@Webifi Webifi changed the title [Feature Request] disable prop for v-from that disables all child form elements [Feature Request] disable prop for v-form that disables all child form elements Sep 13, 2017
@Webifi Webifi changed the title [Feature Request] disable prop for v-form that disables all child form elements [Feature Request] disable prop for v-form that disables all child input elements Sep 13, 2017
@nekosaur nekosaur added T: feature A new feature pending review The issue is still pending disposition labels Sep 13, 2017
@johnleider
Copy link
Member

I really like this idea. What do you think @nekosaur ?

@johnleider johnleider removed the pending review The issue is still pending disposition label Sep 13, 2017
@nekosaur
Copy link
Member

I like the idea, but I'll have to test it out. I'm thinking we'll have some issues with mutating props if we programatically set disabled from VForm while there's an explicit disabled prop on an input inside it.

@jacekkarczmarczyk
Copy link
Member

jacekkarczmarczyk commented Sep 24, 2017

I might be a good idea to add also <v-fieldset> component, it would allow to easily disable only some part of form

We may also want to wait for this vuejs/vue#6097. With this PR we'll be able to create a parentDisabled provider (in v-form/v-fieldset) and use it in inputs (this.parentDisabled || this.disabled instead of this.disabled) regardless wether the input is inside the form or not

@johnleider
Copy link
Member

The only problem with that @jacekkarczmarczyk is that injections are not reactive. I'd imagine you'd want to re-activate the form at some point no?

@mitar
Copy link
Contributor

mitar commented Oct 31, 2017

I would also vote for readonly and not just disable prop. In this way during form submission, while server is handling a request, I can make form read-only which has a benefit that users can copy-paste content out, if server request dies, but cannot modify anything.

Ideally, inputs with content would be read-only, while buttons and other inputs disabled.

@nekosaur nekosaur modified the milestones: v1.0.0, v1.1.x Nov 7, 2017
@nekosaur
Copy link
Member

nekosaur commented Nov 7, 2017

Moving to 1.1 since it already includes a planned refactor of input components

@KaelWD KaelWD self-assigned this Nov 8, 2017
@KaelWD
Copy link
Member

KaelWD commented May 23, 2018

Pushing to 1.2 so we can actually get 1.1 out this year. I did a proof of concept with #3969

@KaelWD KaelWD modified the milestones: v1.1.x, v1.2.x May 23, 2018
@KaelWD KaelWD removed the S: Backlog label Jun 18, 2018
@KaelWD KaelWD modified the milestones: v1.2.0, v1.3.0 Aug 22, 2018
@buzzzzer
Copy link

buzzzzer commented Oct 8, 2018

Any chance, that this feature will fall to 1.3.0 ?

@johnleider
Copy link
Member

This is unfortunately low on triage and did not make it for 1.3. Going to add a help wanted tag if anyone wants to PR.

@johnleider johnleider added the help wanted We are looking for community help label Oct 9, 2018
@johnleider johnleider removed this from the v1.3.0 milestone Oct 9, 2018
@totto357
Copy link
Contributor

totto357 commented Apr 18, 2019

It seems that this feature can be created with reference to Themeable.
In that case, there are two ways to provide/inject disabled prop.
The first way is to add it to Validatable.
The second way is to create a new mixin.
Which of these is better?
In any case, components that directly use disabled prop need to be rewritten to isDisabled.

@totto357
Copy link
Contributor

If do not use mixin , there is also a way to provide from v-form.

@KaelWD KaelWD removed the help wanted We are looking for community help label Apr 18, 2019
@KaelWD KaelWD modified the milestones: v2.0.x, v2.0.0 Apr 18, 2019
@johnleider
Copy link
Member

We still intend to implement this but it did not make the cut for v2.0

@johnleider johnleider modified the milestones: v2.0.0, v2.x.x Jun 11, 2019
@fimion
Copy link

fimion commented Jul 16, 2019

At work we are about to start a new project with vuetify. We are wireframing at the moment, but if this has not been fixed by the time we start programming, I'll see if I can squeeze it into a sprint to add v-form[disabled] and also add a v-fieldset as we will likely be using such a component.

@wizardnet972
Copy link

I think the quickest way to do that is by to implement fieldset and apply the disabled styles by class like v--disabled.

@prashanth1k
Copy link

prashanth1k commented Oct 23, 2019

I think the quickest way to do that is by to implement fieldset and apply the disabled styles by class like v--disabled.

Do you have any examples on how to do that? I am looking for a quick way to conditionally disable multiple forms and I could not get fieldset to work.

@milost1982
Copy link

What is the status of this feature request? Will it be implemented in the next version?

@johnleider johnleider removed this from the v2.x.x milestone Jan 19, 2020
Logikgate added a commit to flypapertech/vuetify that referenced this issue Jan 24, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Jan 24, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Jan 24, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 19, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 19, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 19, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 19, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 20, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Feb 20, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
Logikgate added a commit to flypapertech/vuetify that referenced this issue Mar 23, 2020
A disabled VForm now disables all child inputs

fixes vuetifyjs#1707
@Leespiker Leespiker added the S: has PR The issue has a pending Pull Request label Apr 3, 2020
@Leespiker Leespiker linked a pull request Apr 3, 2020 that will close this issue
8 tasks
johnleider pushed a commit that referenced this issue May 14, 2020
fixes #1707

* feat(VForm): Add form level disabled prop

A disabled VForm now disables all child inputs

* Fixed formatting based on review

* Better wording for disabled prop documentation
@johnleider
Copy link
Member

fixed in #10325

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VForm S: has PR The issue has a pending Pull Request T: feature A new feature
Projects
None yet
Development

Successfully merging a pull request may close this issue.