Skip to content

[TextField, Textarea]: isClearable defaults to true, no default maxRows #945

Description

@ly-tempel-bitweb

Problem

  1. TextField's isClearable defaults to false. Angular changed its equivalent, tedi-form-field's clearable, to default to true ([FormField]: clearable set once on the form field, shared by DateField and TimeField angular#572).

  2. Textarea was previously excluded from clearing on purpose. That decision was recently changed: Textarea must now be clearable like the other form fields ([Textarea]: clearable by default, no default maxRows for autoGrow angular#751).

  3. Textarea's maxRows defaults to 12, so an autoGrow textarea stops growing at 12 rows unless the consumer raises the limit.

Solution

  • Default isClearable to true on TextField, so a field with a value shows a
    clear button. Pass isClearable={false} to opt out.
  • Textarea: make it clearable by default.
    • Stop omitting isClearable, showClearOnInteraction and onClear from
      TextareaProps, and remove the hardcoded isClearable={false}.
    • Pass isClearable={false} to opt out.
  • Textarea maxRows: remove the default value.
    • When maxRows isn't set, autoGrow has no row limit. maxHeight still caps
      the height if it's set.
    • When maxRows is set, nothing changes.
  • Read-only: hide the clear button when the input is read-only through
    input.readOnly too. showClearButton only checks the readOnly prop, while
    the input renders readOnly={readOnly || input?.readOnly}.
  • Table column filters get a clear button with the new default. Clearing
    calls onChange(''), so the filter resets. Add a test that it does.
  • DateField, TimeField, DateTimeField and Search already default to clearable,
    so they're unaffected.
  • Update the TextField and Textarea stories and docs for the new defaults.

This is a breaking change:

  • Text fields and textareas that showed no clear button now show one once they
    have a value.
  • autoGrow textareas without maxRows no longer stop at 12 rows.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

tedi-readyTEDI-Ready component issue

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions