@imposium-hub/components 2.15.0-2 → 2.16.0-0

package/src/components/text-field/TextField.test.tsx

@@ -0,0 +1,988 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, screen } from '../../test/utils';
+import TextField from './TextField';
+
+describe('TextField', () => {
+    const defaultProps = {
+        onChange: vi.fn(),
+        label: 'Test Text Field'
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('Rendering', () => {
+        it('renders without crashing', () => {
+            render(<TextField {...defaultProps} />);
+            const input = screen.getByRole('textbox');
+            expect(input).toBeDefined();
+        });
+
+        it('displays the correct value', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    value='test value'
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('test value');
+        });
+
+        it('displays placeholder when provided', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    placeholder='Enter text'
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.placeholder).toBe('Enter text');
+        });
+
+        it('sets disabled state correctly', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    disabled
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.disabled).toBe(true);
+        });
+
+        it('sets readOnly attribute when readOnly prop is true', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    readOnly
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.readOnly).toBe(true);
+        });
+
+        it('applies maxLength attribute when provided', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    maxLength={50}
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.maxLength).toBe(50);
+        });
+
+        it('focuses input on mount when focusOnMount is true', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    focusOnMount
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(document.activeElement).toBe(input);
+        });
+    });
+
+    describe('Basic Interactions', () => {
+        it('calls onChange when value changes in uncontrolled mode', () => {
+            const onChange = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'new text' } });
+
+            expect(onChange).toHaveBeenCalledWith('new text');
+        });
+
+        it('calls onFocus when input receives focus', () => {
+            const onFocus = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    onFocus={onFocus}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            expect(onFocus).toHaveBeenCalled();
+        });
+
+        it('calls onBlur when input loses focus', () => {
+            const onBlur = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    onBlur={onBlur}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.blur(input);
+
+            expect(onBlur).toHaveBeenCalled();
+        });
+    });
+
+    describe('Pattern Validation', () => {
+        it('prevents input that does not match pattern', () => {
+            const onChange = vi.fn();
+            const numberPattern = /^\d*$/;
+            render(
+                <TextField
+                    {...defaultProps}
+                    onChange={onChange}
+                    pattern={numberPattern}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'abc123' } });
+
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('allows input that matches pattern', () => {
+            const onChange = vi.fn();
+            const numberPattern = /^\d*$/;
+            render(
+                <TextField
+                    {...defaultProps}
+                    onChange={onChange}
+                    pattern={numberPattern}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: '123' } });
+
+            expect(onChange).toHaveBeenCalledWith('123');
+        });
+    });
+
+    describe('Controlled Mode', () => {
+        it('renders edit button in controlled mode', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='test'
+                    onSubmit={vi.fn()}
+                />
+            );
+            const button = container.querySelector('[data-tooltip-content="Edit"]');
+            expect(button).toBeDefined();
+            expect(button?.getAttribute('data-tooltip-content')).toBe('Edit');
+        });
+    });
+
+    describe('Submittable Mode', () => {
+        it('renders submit button in submittable mode', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    doSubmit={vi.fn()}
+                />
+            );
+            const button = container.querySelector('[data-tooltip-content="Confirm"]');
+            expect(button).toBeDefined();
+            expect(button?.getAttribute('data-tooltip-content')).toBe('Confirm');
+        });
+
+        it('renders search icon when submittableType is search', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType='search'
+                    doSubmit={vi.fn()}
+                />
+            );
+            const button = container.querySelector('[data-tooltip-content="Search"]');
+            expect(button).toBeDefined();
+            expect(button?.getAttribute('data-tooltip-content')).toBe('Search');
+        });
+    });
+
+    describe('Loading State', () => {
+        it('disables input when loading is true', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    loading
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.disabled).toBe(true);
+        });
+    });
+
+    describe('Constructor Validation', () => {
+        it('throws error when both controlled and submittable are true', () => {
+            expect(() => {
+                render(
+                    <TextField
+                        {...defaultProps}
+                        controlled
+                        submittable
+                    />
+                );
+            }).toThrow('Actionable TextField(s) must be one of either: controlled or submittable.');
+        });
+    });
+
+    describe('Controlled Mode', () => {
+        it('renders in controlled mode with edit button', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='test value'
+                />
+            );
+
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            expect(editButton).toBeDefined();
+        });
+
+        it('toggles editing state when edit button is clicked', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='test value'
+                />
+            );
+
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Should now show check icon instead of edit icon
+            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
+            expect(checkButton).toBeDefined();
+        });
+
+        it('calls onSubmit when editing is completed with changed value', () => {
+            const onSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='original'
+                    onSubmit={onSubmit}
+                />
+            );
+
+            // Start editing
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Change value
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'modified' } });
+
+            // Complete editing
+            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(checkButton);
+
+            expect(onSubmit).toHaveBeenCalledWith('modified');
+        });
+
+        it('does not call onSubmit when editing is completed without changes', () => {
+            const onSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='unchanged'
+                    onSubmit={onSubmit}
+                />
+            );
+
+            // Start editing
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Complete editing without changes
+            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(checkButton);
+
+            expect(onSubmit).not.toHaveBeenCalled();
+        });
+
+        it('calls onSubmit with null when empty value is submitted', () => {
+            const onSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='original'
+                    onSubmit={onSubmit}
+                />
+            );
+
+            // Start editing
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Clear value
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: '' } });
+
+            // Complete editing
+            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(checkButton);
+
+            expect(onSubmit).toHaveBeenCalledWith(null);
+        });
+    });
+
+    describe('Submittable Mode', () => {
+        it('renders submittable mode with search icon', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType='search'
+                />
+            );
+
+            const submitButton = container.querySelector('[data-tooltip-content="Search"]');
+            expect(submitButton).toBeDefined();
+        });
+
+        it('renders submittable mode with check icon', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType='check'
+                />
+            );
+
+            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
+            expect(submitButton).toBeDefined();
+        });
+
+        it('renders submittable mode with add icon', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType='add'
+                />
+            );
+
+            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
+            expect(submitButton).toBeDefined();
+        });
+
+        it('calls doSubmit when submit button is clicked with value', () => {
+            const doSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    doSubmit={doSubmit}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'test submission' } });
+
+            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
+            fireEvent.click(submitButton);
+
+            expect(doSubmit).toHaveBeenCalledWith('test submission');
+        });
+
+        it('clears value after submission when submittableType is add', () => {
+            const doSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType='add'
+                    doSubmit={doSubmit}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'test value' } });
+
+            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
+            fireEvent.click(submitButton);
+
+            expect(input.value).toBe('');
+        });
+
+        it('shows clear button when value exists', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    value='some value'
+                />
+            );
+
+            const clearButton = container.querySelector('[data-tooltip-content="Clear"]');
+            expect(clearButton).toBeDefined();
+        });
+
+        it('calls doSubmit with empty string when clear button is clicked', () => {
+            const doSubmit = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    value='some value'
+                    doSubmit={doSubmit}
+                />
+            );
+
+            const clearButton = container.querySelector('[data-tooltip-content="Clear"]');
+            fireEvent.click(clearButton);
+
+            expect(doSubmit).toHaveBeenCalledWith('');
+        });
+    });
+
+    describe('Copy Functionality', () => {
+        it('shows copy button when showCopy is true', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    showCopy
+                    value='copyable text'
+                />
+            );
+
+            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
+            expect(copyButton).toBeDefined();
+        });
+
+        it('calls onNotification when copy succeeds', async () => {
+            const onNotification = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    showCopy
+                    value='copyable text'
+                    onNotification={onNotification}
+                />
+            );
+
+            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
+            fireEvent.click(copyButton);
+
+            // Wait for clipboard operation
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            expect(onNotification).toHaveBeenCalledWith('Copied to clipboard!');
+        });
+
+        it('calls onError when copy fails', async () => {
+            // Mock clipboard to fail
+            const originalClipboard = navigator.clipboard;
+            Object.defineProperty(navigator, 'clipboard', {
+                value: {
+                    writeText: vi.fn().mockRejectedValue(new Error('Copy failed'))
+                },
+                writable: true,
+                configurable: true
+            });
+
+            const onError = vi.fn();
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    showCopy
+                    value='copyable text'
+                    onError={onError}
+                />
+            );
+
+            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
+            fireEvent.click(copyButton);
+
+            // Wait for clipboard operation
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            expect(onError).toHaveBeenCalledWith('Error copying to clipboard.');
+
+            // Restore clipboard
+            Object.defineProperty(navigator, 'clipboard', {
+                value: originalClipboard,
+                writable: true,
+                configurable: true
+            });
+        });
+    });
+
+    describe('Pattern Validation', () => {
+        it('prevents input that does not match pattern', () => {
+            const onChange = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    pattern={/^\d+$/} // Only digits
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: 'abc123' } });
+
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('allows input that matches pattern', () => {
+            const onChange = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    pattern={/^\d+$/} // Only digits
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: '123' } });
+
+            expect(onChange).toHaveBeenCalledWith('123');
+        });
+
+        it('converts empty string to null for regular input', () => {
+            const onChange = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    onChange={onChange}
+                    value='initial'
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.change(input, { target: { value: '' } });
+
+            expect(onChange).toHaveBeenCalledWith(null);
+        });
+    });
+
+    describe('Button Visibility', () => {
+        it('hides all buttons when hideButtons is true', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    showCopy
+                    hideButtons
+                    value='test'
+                />
+            );
+
+            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
+            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
+
+            expect(submitButton).toBeNull();
+            expect(copyButton).toBeNull();
+        });
+
+        it('renders custom buttons array', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    buttons={[<button key='custom'>Custom</button>]}
+                />
+            );
+
+            const button = screen.getByText('Custom');
+            expect(button).toBeDefined();
+        });
+
+        it('renders single custom button', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    buttons={<button key='custom'>Single</button>}
+                />
+            );
+
+            const button = screen.getByText('Single');
+            expect(button).toBeDefined();
+        });
+    });
+
+    describe('Suggestions/Autocomplete', () => {
+        it('renders with suggestions and autocomplete functionality', () => {
+            const suggestions = ['apple', 'banana', 'cherry'];
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    suggestions={suggestions}
+                />
+            );
+
+            // Should render ReactTextareaAutocomplete (mocked as 'input' string)
+            const textContent = container.textContent;
+            expect(textContent).toContain('input');
+        });
+
+        it('handles suggestion click in submittable mode', () => {
+            const doSubmit = vi.fn();
+            const suggestions = ['apple', 'banana', 'cherry'];
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    suggestions={suggestions}
+                    doSubmit={doSubmit}
+                />
+            );
+
+            // Test that it renders with suggestions
+            expect(container.textContent).toContain('input');
+        });
+
+        it('handles Enter key in submittable mode with suggestions', () => {
+            const doSubmit = vi.fn();
+            const suggestions = ['apple', 'banana', 'cherry'];
+            render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    suggestions={suggestions}
+                    doSubmit={doSubmit}
+                />
+            );
+
+            // Test that component renders without errors
+            expect(doSubmit).toBeDefined();
+        });
+    });
+
+    describe('Keyboard Shortcuts', () => {
+        it('binds hotkeys on focus in submittable mode', () => {
+            const doSubmit = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    doSubmit={doSubmit}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            // Test that focus event was handled
+            expect(input).toBeDefined();
+        });
+
+        it('unbinds hotkeys on blur in submittable mode', () => {
+            const doSubmit = vi.fn();
+            const onBlur = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    doSubmit={doSubmit}
+                    onBlur={onBlur}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+            fireEvent.blur(input);
+
+            expect(onBlur).toHaveBeenCalled();
+        });
+
+        it('binds hotkeys on focus in controlled mode', () => {
+            const onSubmit = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='original'
+                    onSubmit={onSubmit}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            // Test that focus event was handled
+            expect(input).toBeDefined();
+        });
+
+        it('unbinds hotkeys on blur in controlled mode', () => {
+            const onBlur = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='original'
+                    onBlur={onBlur}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+            fireEvent.blur(input);
+
+            expect(onBlur).toHaveBeenCalled();
+        });
+    });
+
+    describe('Lifecycle Methods', () => {
+        it('handles componentWillUnmount for submittable mode', () => {
+            const { unmount } = render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                />
+            );
+
+            // Focus to bind hotkeys
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            // Unmount should clean up hotkey bindings
+            unmount();
+        });
+
+        it('handles componentWillUnmount for controlled mode', () => {
+            const { unmount } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                />
+            );
+
+            // Focus to bind hotkeys
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            // Unmount should clean up hotkey bindings
+            unmount();
+        });
+
+        it('handles componentDidUpdate for controlled mode', () => {
+            const { rerender } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='initial'
+                />
+            );
+
+            // Update component to trigger componentDidUpdate
+            rerender(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='updated'
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('updated');
+        });
+    });
+
+    describe('Edge Cases', () => {
+        it('handles null submittableType gracefully', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    submittableType={null}
+                />
+            );
+
+            // Should still render without crashing
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input).toBeDefined();
+        });
+
+        it('handles empty suggestions array', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    suggestions={[]}
+                />
+            );
+
+            // Should render ReactTextareaAutocomplete (mocked as 'input' string) even with empty suggestions
+            expect(container.textContent).toContain('input');
+        });
+
+        it('handles disabled state in controlled mode', () => {
+            render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    disabled
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.disabled).toBe(true);
+        });
+
+        it('handles blur event with hotkey cleanup', () => {
+            const onBlur = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    submittable
+                    onBlur={onBlur}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            fireEvent.focus(input);
+            fireEvent.blur(input);
+
+            expect(onBlur).toHaveBeenCalled();
+        });
+
+        it('handles focus event with hotkey binding', () => {
+            const onFocus = vi.fn();
+            render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    onFocus={onFocus}
+                />
+            );
+
+            const input = screen.getByRole('textbox');
+            fireEvent.focus(input);
+
+            expect(onFocus).toHaveBeenCalled();
+        });
+
+        it('handles setEditing method', () => {
+            const { container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='test'
+                />
+            );
+
+            // Start editing by clicking edit button
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Should be in editing mode
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.disabled).toBe(false);
+        });
+
+        it('handles getValue method for different modes', () => {
+            const { rerender } = render(
+                <TextField
+                    {...defaultProps}
+                    value='test'
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('test');
+
+            // Test controlled mode
+            rerender(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='controlled test'
+                />
+            );
+
+            const controlledInput: HTMLInputElement = screen.getByRole('textbox');
+            expect(controlledInput.value).toBe('controlled test');
+        });
+    });
+
+    describe('Component Updates', () => {
+        it('updates internal value when props.value changes', () => {
+            const { rerender } = render(
+                <TextField
+                    {...defaultProps}
+                    value='initial'
+                />
+            );
+
+            rerender(
+                <TextField
+                    {...defaultProps}
+                    value='updated'
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('updated');
+        });
+
+        it('updates internal value when controlled mode value changes', () => {
+            const { rerender } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='initial'
+                />
+            );
+
+            rerender(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='updated'
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('updated');
+        });
+
+        it('clears internal value when editing ends and value is empty', () => {
+            const { rerender, container } = render(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value='initial'
+                />
+            );
+
+            // Start editing
+            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
+            fireEvent.click(editButton);
+
+            // Update props to empty value and stop editing
+            rerender(
+                <TextField
+                    {...defaultProps}
+                    controlled
+                    value=''
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('textbox');
+            expect(input.value).toBe('');
+        });
+    });
+});