FormFieldGroup "disabled" renders disabled styles but does not disable child inputs (v11)
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
Thanks for the detailed report!
For the time being, we will update the docs. Reason being that changing the behavior could be a breaking change (however unlikely it is) and we don't want that between major releases. We'll fix this in the next major release, v12