instructure / instructure/instructure-ui
FormFieldGroup "disabled" renders disabled styles but does not disable child inputs (v11)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 480
- Forks
- 108
- Avg merge
- 6d 1h
- Merged PRs (30d)
- 16
Description
Important note: if you are an Instructure employee please use Slack for bug reports/questions/feature requests. We can assist you much quicker and easier that way. If you are a third party user please ignore this message.
Background Information
Package Version(s):
@instructure/ui v11.x@instructure/ui-themes v11.x@instructure/ui-form-field v11.x@instructure/ui-text-input v11.x@instructure/ui-text-area v11.x
Browser:
- Chrome (latest)
OS:
- macOS (latest)
Device:
- Desktop/Laptop
Component:
FormFieldGroup
Describe the Bug
Setting disabled on <FormFieldGroup> applies disabled styling/ARIA to the group, but does not disable the child inputs. The nested TextInput/TextArea remain focusable and editable.
This seems to match the behaviour discussed in #117, which was closed without a linked fix, hence opening a new issue with a minimal repro on current versions.
Steps To Reproduce
- Render a
FormFieldGroupwithdisabledset. - Place a
TextInputandTextAreainsideFormFieldchildren. - Try focusing/typing in the inputs — they are still interactive.
https://codesandbox.io/p/sandbox/instui-form-field-group-lcdf5g
Expected Behavior
Either:
FormFieldGroupdisables known child inputs (propagates a disabled context), or- Documentation clearly states that
disabledis visual/ARIA-only and points to supported patterns (interaction="disabled"/disabled={true}per input, or wrapping with<fieldset disabled>).
Additional Information
Current Workaround(s):
Set interaction="disabled" and disabled="true" on each each TextInput/TextArearespectively, or: Wrap the group with a native
Products Affected:
Web applications using InstUI FormFieldGroup with group-level disabled expected to disable its children.
Are you willing to submit a PR to fix?
- Yes, I'm willing to submit a PR
Requested Priority:
Normal
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the FormFieldGroup, FormField, TextInput, and TextArea implementations and reproduce the behavior in the linked CodeSandbox. Determine whether the supported fix is child-input propagation or documentation of the current behavior and workarounds; done means the chosen behavior is verified for nested controls.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100