instructure / instructure/instructure-ui

FormFieldGroup "disabled" renders disabled styles but does not disable child inputs (v11)

Open
#2,217 1 comment 1 reaction 0 assignees View on GitHub

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
  1. Render a FormFieldGroup with disabled set.
  2. Place a TextInput and TextArea inside FormField children.
  3. 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?

  • Yes, I'm willing to submit a PR

Requested Priority:

Normal

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.