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:
OS:
Device:
Component:
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
FormFieldGroup with disabled set.
- Place a
TextInput and TextArea inside FormField children.
- Try focusing/typing in the inputs — they are still interactive.
https://codesandbox.io/p/sandbox/instui-form-field-group-lcdf5g
Expected Behavior
Either:
FormFieldGroup disables known child inputs (propagates a disabled context), or
- Documentation clearly states that
disabled is 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
` so all real controls inside are disabled.
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?
Requested Priority:
Normal
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.xBrowser:
OS:
Device:
Component:
FormFieldGroupDescribe the Bug
Setting
disabledon<FormFieldGroup>applies disabled styling/ARIA to the group, but does not disable the child inputs. The nestedTextInput/TextArearemain 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
FormFieldGroupwithdisabledset.TextInputandTextAreainsideFormFieldchildren.https://codesandbox.io/p/sandbox/instui-form-field-group-lcdf5g
Expected Behavior
Either:
FormFieldGroupdisables known child inputs (propagates a disabled context), ordisabledis 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
` so all real controls inside are disabled.interaction="disabled"anddisabled="true" on each eachTextInput/TextArearespectively, or: Wrap the group with a nativeProducts Affected:
Web applications using InstUI
FormFieldGroupwith group-level disabled expected to disable its children.Are you willing to submit a PR to fix?
Requested Priority:
Normal