From 74aa2eef769b7ea03dc12a61ea0e5f47e8b53000 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 30 Sep 2026 20:03:36 +0300
Subject: [PATCH 1/3] feat(text-field): isClearable defaults to true #945

---
 .../components/content/table/table.spec.tsx   | 12 ++++++++++++
 .../form/textarea/textarea.spec.tsx           |  5 +++++
 .../components/form/textarea/textarea.tsx     |  1 +
 .../form/textfield/textfield.spec.tsx         | 19 +++++++++++++++++++
 .../components/form/textfield/textfield.tsx   | 10 ++++++----
 5 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/tedi/components/content/table/table.spec.tsx b/src/tedi/components/content/table/table.spec.tsx
index 209cd6f1f..557f66ab0 100644
--- a/src/tedi/components/content/table/table.spec.tsx
+++ b/src/tedi/components/content/table/table.spec.tsx
@@ -853,6 +853,18 @@ describe('Table', () => {
       expect(screen.queryByRole('cell', { name: 'Jüri' })).not.toBeInTheDocument();
     });
 
+    it('resets the column filter from the clear button', () => {
+      render(<Table<Person> id="t-filter-clear" data={data} columns={columns} enableColumnFilters />);
+
+      fireEvent.change(screen.getByLabelText('Filter Name'), { target: { value: 'Anna' } });
+      expect(screen.queryByRole('cell', { name: 'Jüri' })).not.toBeInTheDocument();
+
+      fireEvent.click(screen.getByTitle(/clear/i));
+
+      expect(screen.getByLabelText('Filter Name')).toHaveValue('');
+      expect(screen.getByRole('cell', { name: 'Jüri' })).toBeInTheDocument();
+    });
+
     it('forwards meta.filterProps (e.g. maxLength) to the built-in column filter input', () => {
       const filterColumns: ColumnDef<Person>[] = [
         { id: 'name', header: 'Name', accessorKey: 'name', meta: { filterProps: { input: { maxLength: 40 } } } },
diff --git a/src/tedi/components/form/textarea/textarea.spec.tsx b/src/tedi/components/form/textarea/textarea.spec.tsx
index 791515c63..70d792105 100644
--- a/src/tedi/components/form/textarea/textarea.spec.tsx
+++ b/src/tedi/components/form/textarea/textarea.spec.tsx
@@ -33,6 +33,11 @@ describe('Textarea component', () => {
     expect(textarea).toHaveAttribute('name', 'testTextarea');
   });
 
+  it('shows no clear button, even with a value', () => {
+    render(<Textarea {...defaultProps} value="Some text" onChange={jest.fn()} />);
+    expect(screen.queryByTitle(/clear/i)).not.toBeInTheDocument();
+  });
+
   it('applies the correct CSS classes', () => {
     render(<Textarea {...defaultProps} className="custom-class" />);
     const wrapper = screen.getByRole('textbox').closest('div[data-name="textarea"]');
diff --git a/src/tedi/components/form/textarea/textarea.tsx b/src/tedi/components/form/textarea/textarea.tsx
index 1066c667c..252d04851 100644
--- a/src/tedi/components/form/textarea/textarea.tsx
+++ b/src/tedi/components/form/textarea/textarea.tsx
@@ -193,6 +193,7 @@ export const Textarea = forwardRef<TextFieldForwardRef, TextareaProps>((props, r
         [styles['tedi-textarea__input--auto-grow']]: autoGrow,
       })}
       isTextArea={true}
+      isClearable={false}
       className={cn(styles['tedi-textarea'], className)}
       value={value}
       onChange={handleInputChange}
diff --git a/src/tedi/components/form/textfield/textfield.spec.tsx b/src/tedi/components/form/textfield/textfield.spec.tsx
index b1298b03f..4fd4c7373 100644
--- a/src/tedi/components/form/textfield/textfield.spec.tsx
+++ b/src/tedi/components/form/textfield/textfield.spec.tsx
@@ -66,6 +66,25 @@ describe('TextField component', () => {
     expect(input).toHaveValue('');
   });
 
+  it('is clearable by default', () => {
+    render(<TextField {...defaultProps} value="x" />);
+    expect(screen.getByTitle(/clear/i)).toBeInTheDocument();
+  });
+
+  it('shows no clear button with isClearable={false}', () => {
+    render(<TextField {...defaultProps} value="x" isClearable={false} />);
+    expect(screen.queryByTitle(/clear/i)).not.toBeInTheDocument();
+  });
+
+  it.each([
+    ['readOnly', { readOnly: true }],
+    ['input.readOnly', { input: { readOnly: true } }],
+  ])('shows no clear button when read-only through %s', (_, props) => {
+    render(<TextField {...defaultProps} value="x" {...props} />);
+    expect(screen.getByPlaceholderText(/enter text/i)).toHaveAttribute('readonly');
+    expect(screen.queryByTitle(/clear/i)).not.toBeInTheDocument();
+  });
+
   it('adds the reveal-on-hover modifier only with showClearOnInteraction and a filled clearable field', () => {
     const container = () => document.querySelector('[data-name="textfield"]') as HTMLElement;
     const noop = () => undefined;
diff --git a/src/tedi/components/form/textfield/textfield.tsx b/src/tedi/components/form/textfield/textfield.tsx
index 51c1878c2..947bda2c5 100644
--- a/src/tedi/components/form/textfield/textfield.tsx
+++ b/src/tedi/components/form/textfield/textfield.tsx
@@ -59,8 +59,9 @@ type TextFieldBreakpointProps = {
    * When `true`, displays a clear (×) button on the right side when the field has a value.
    *
    * Clicking the button clears the input and calls `onClear` (if provided).
+   * Hidden while the field is read-only.
    *
-   * @default false
+   * @default true
    */
   isClearable?: boolean;
   /**
@@ -276,7 +277,7 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
     size = 'default',
     placeholder,
     isArrowsHidden = true,
-    isClearable,
+    isClearable = true,
     showClearOnInteraction,
     onClear,
     onChange,
@@ -306,7 +307,8 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
   const [innerValue, setInnerValue] = React.useState(externalValue ?? defaultValue ?? '');
 
   const value = externalValue ?? innerValue;
-  const showClearButton = Boolean(isClearable && value && !readOnly);
+  const isReadOnly = readOnly || input?.readOnly;
+  const showClearButton = Boolean(isClearable && value && !isReadOnly);
 
   const inputGroup = useOptionalInputGroup?.();
   const generatedId = React.useId();
@@ -428,7 +430,7 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
       onChange={handleChange}
       onChangeEvent={onChangeEvent}
       disabled={disabled}
-      readOnly={readOnly || input?.readOnly}
+      readOnly={isReadOnly}
       required={required}
       invalid={isInvalid}
       placeholder={placeholder}

From f19ef3d9cbcfde6524cc8aec57f6b6e5b7368751 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 30 Sep 2026 20:24:38 +0300
Subject: [PATCH 2/3] fix(text-field): add CR fixes #945

---
 .../form/textfield/textfield.spec.tsx         | 33 +++++++++++++++++++
 .../components/form/textfield/textfield.tsx   | 10 ++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/textfield/textfield.spec.tsx b/src/tedi/components/form/textfield/textfield.spec.tsx
index 4fd4c7373..59cfeb6da 100644
--- a/src/tedi/components/form/textfield/textfield.spec.tsx
+++ b/src/tedi/components/form/textfield/textfield.spec.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
 
 import { useBreakpointProps } from '../../../helpers';
 import TextField, { TextFieldProps } from './textfield';
@@ -66,6 +67,38 @@ describe('TextField component', () => {
     expect(input).toHaveValue('');
   });
 
+  it('calls onChange, onChangeEvent and onClear once when cleared', () => {
+    const handleChange = jest.fn();
+    const handleChangeEvent = jest.fn();
+    const handleClear = jest.fn();
+    render(
+      <TextField {...defaultProps} onChange={handleChange} onChangeEvent={handleChangeEvent} onClear={handleClear} />
+    );
+    const input = screen.getByPlaceholderText(/enter text/i);
+    fireEvent.change(input, { target: { value: 'To Be Cleared' } });
+    handleChange.mockClear();
+    handleChangeEvent.mockClear();
+
+    fireEvent.click(screen.getByTitle(/clear/i));
+
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith('');
+    expect(handleChangeEvent).toHaveBeenCalledTimes(1);
+    expect(handleChangeEvent.mock.calls[0][0].target.value).toBe('');
+    expect(handleClear).toHaveBeenCalledTimes(1);
+    expect(input).toHaveValue('');
+  });
+
+  it('clears a controlled field through onChange', () => {
+    const Controlled = () => {
+      const [value, setValue] = React.useState('Controlled');
+      return <TextField {...defaultProps} value={value} onChange={setValue} />;
+    };
+    render(<Controlled />);
+    fireEvent.click(screen.getByTitle(/clear/i));
+    expect(screen.getByPlaceholderText(/enter text/i)).toHaveValue('');
+  });
+
   it('is clearable by default', () => {
     render(<TextField {...defaultProps} value="x" />);
     expect(screen.getByTitle(/clear/i)).toBeInTheDocument();
diff --git a/src/tedi/components/form/textfield/textfield.tsx b/src/tedi/components/form/textfield/textfield.tsx
index 947bda2c5..15344ed2a 100644
--- a/src/tedi/components/form/textfield/textfield.tsx
+++ b/src/tedi/components/form/textfield/textfield.tsx
@@ -351,8 +351,14 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
   );
 
   const clearInput = useCallback(() => {
-    if (!isControlled) setInnerValue('');
-    onChange?.('');
+    const element = fieldRef.current;
+    if (element) {
+      Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), 'value')?.set?.call(element, '');
+      element.dispatchEvent(new Event('input', { bubbles: true }));
+    } else {
+      if (!isControlled) setInnerValue('');
+      onChange?.('');
+    }
     onClear?.();
   }, [isControlled, onChange, onClear]);
 

From 0202ccb4587d94e70ad773b64561fc7685a84301 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Thu, 1 Oct 2026 13:58:35 +0300
Subject: [PATCH 3/3] test(text-field,textarea): cover ref forwarding, id, icon
 size and disabled clear #945

---
 .../form/textarea/textarea.spec.tsx           | 14 +++++++
 .../components/form/textarea/textarea.tsx     |  7 ++--
 .../form/textfield/textfield.spec.tsx         | 37 +++++++++++++++++++
 .../components/form/textfield/textfield.tsx   | 18 ++++-----
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/tedi/components/form/textarea/textarea.spec.tsx b/src/tedi/components/form/textarea/textarea.spec.tsx
index 21b02e892..034f2bc78 100644
--- a/src/tedi/components/form/textarea/textarea.spec.tsx
+++ b/src/tedi/components/form/textarea/textarea.spec.tsx
@@ -1,7 +1,9 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
 
 import { useBreakpointProps } from '../../../helpers';
+import { TextFieldForwardRef } from '../textfield/textfield';
 import Textarea, { TextareaProps } from './textarea';
 
 import '@testing-library/jest-dom';
@@ -32,6 +34,18 @@ describe('Textarea component', () => {
     expect(textarea).toHaveAttribute('name', 'testTextarea');
   });
 
+  it('forwards the ref to a callback ref', () => {
+    const ref = jest.fn();
+    render(<Textarea {...defaultProps} ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.objectContaining({ input: expect.any(HTMLTextAreaElement) }));
+  });
+
+  it('forwards the ref to an object ref', () => {
+    const ref = React.createRef<TextFieldForwardRef>();
+    render(<Textarea {...defaultProps} ref={ref} />);
+    expect(ref.current?.input).toBeInstanceOf(HTMLTextAreaElement);
+  });
+
   it('shows no clear button, even with a value', () => {
     render(<Textarea {...defaultProps} value="Some text" onChange={jest.fn()} />);
     expect(screen.queryByTitle(/clear/i)).not.toBeInTheDocument();
diff --git a/src/tedi/components/form/textarea/textarea.tsx b/src/tedi/components/form/textarea/textarea.tsx
index 9566c67a5..0c2e3e195 100644
--- a/src/tedi/components/form/textarea/textarea.tsx
+++ b/src/tedi/components/form/textarea/textarea.tsx
@@ -76,9 +76,8 @@ export const Textarea = forwardRef<TextFieldForwardRef, TextareaProps>((props, r
   const value = React.useMemo(() => externalValue ?? innerValue, [externalValue, innerValue]);
 
   const calculateHeight = React.useCallback(() => {
-    if (!autoGrow || !textareaRef.current) return;
-
-    const textarea = textareaRef.current;
+    // Only called with autoGrow on, after the textarea has mounted and set the ref.
+    const textarea = textareaRef.current as HTMLTextAreaElement;
 
     const originalOverflow = textarea.style.overflow;
 
@@ -119,7 +118,7 @@ export const Textarea = forwardRef<TextFieldForwardRef, TextareaProps>((props, r
     textarea.style.overflow = originalOverflow;
     // Only scroll once content overflows (past maxRows, or clipped by maxHeight); 1px tolerance for rounding
     textarea.style.overflowY = textarea.scrollHeight - textarea.clientHeight > 1 ? 'auto' : 'hidden';
-  }, [autoGrow, minRows, maxRows]);
+  }, [minRows, maxRows]);
 
   useEffect(() => {
     if (autoGrow) {
diff --git a/src/tedi/components/form/textfield/textfield.spec.tsx b/src/tedi/components/form/textfield/textfield.spec.tsx
index 59cfeb6da..b1ce0ebf8 100644
--- a/src/tedi/components/form/textfield/textfield.spec.tsx
+++ b/src/tedi/components/form/textfield/textfield.spec.tsx
@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { useBreakpointProps } from '../../../helpers';
+import InputGroup from '../input-group/input-group';
 import TextField, { TextFieldProps } from './textfield';
 
 import '@testing-library/jest-dom';
@@ -99,6 +100,42 @@ describe('TextField component', () => {
     expect(screen.getByPlaceholderText(/enter text/i)).toHaveValue('');
   });
 
+  it('generates an id when none is given', () => {
+    render(<TextField label="Generated" />);
+    const input = screen.getByRole('textbox');
+    expect(input.id).not.toBe('');
+    expect(screen.getByText('Generated')).toHaveAttribute('for', input.id);
+  });
+
+  it('takes the id from the input group when none is given', () => {
+    // Search renders a TextField inside an InputGroup this way; the group provides the id.
+    render(
+      <InputGroup id="group-id" label="Group">
+        <TextField label="In group" />
+      </InputGroup>
+    );
+    expect(screen.getByRole('textbox')).toHaveAttribute('id', 'group-id');
+  });
+
+  it.each([
+    ['large', 24],
+    ['small', 16],
+    ['default', 18],
+  ] as const)('sizes the icon for size=%s', (size, iconSize) => {
+    render(<TextField {...defaultProps} size={size} icon="search" />);
+    expect(screen.getByText('search')).toHaveClass(`tedi-icon--size-${iconSize}`);
+  });
+
+  it('disables the clear button of a disabled field', () => {
+    const handleClear = jest.fn();
+    render(<TextField {...defaultProps} value="x" disabled onClear={handleClear} />);
+    const clearButton = screen.getByTitle(/clear/i);
+    expect(clearButton).toBeDisabled();
+    fireEvent.click(clearButton);
+    expect(handleClear).not.toHaveBeenCalled();
+    expect(screen.getByPlaceholderText(/enter text/i)).toHaveValue('x');
+  });
+
   it('is clearable by default', () => {
     render(<TextField {...defaultProps} value="x" />);
     expect(screen.getByTitle(/clear/i)).toBeInTheDocument();
diff --git a/src/tedi/components/form/textfield/textfield.tsx b/src/tedi/components/form/textfield/textfield.tsx
index 01dd438f1..ad55be8dc 100644
--- a/src/tedi/components/form/textfield/textfield.tsx
+++ b/src/tedi/components/form/textfield/textfield.tsx
@@ -298,7 +298,7 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
     startSlot,
     endSlot,
     ...rest
-  } = getCurrentBreakpointProps<TextFieldProps>(props) || {};
+  } = getCurrentBreakpointProps<TextFieldProps>(props);
 
   const { getLabel } = useLabels();
 
@@ -352,16 +352,12 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
   );
 
   const clearInput = useCallback(() => {
-    const element = fieldRef.current;
-    if (element) {
-      Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), 'value')?.set?.call(element, '');
-      element.dispatchEvent(new Event('input', { bubbles: true }));
-    } else {
-      if (!isControlled) setInnerValue('');
-      onChange?.('');
-    }
+    // The clear button only renders once the field has mounted, so the element is there to clear.
+    const element = fieldRef.current as FieldElement;
+    Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), 'value')?.set?.call(element, '');
+    element.dispatchEvent(new Event('input', { bubbles: true }));
     onClear?.();
-  }, [isControlled, onChange, onClear]);
+  }, [onClear]);
 
   const renderIcon = useCallback(() => {
     if (!icon) return null;
@@ -422,7 +418,7 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
         {showClearButton && icon && (
           <Separator color="primary" axis="vertical" className={styles['tedi-textfield__separator']} />
         )}
-        {icon && renderIcon()}
+        {renderIcon()}
       </div>
     );
   }, [showClearButton, icon, renderClearButton, renderIcon]);