diff --git a/.changepacks/changepack_log_ui_kit_forward_native_props.json b/.changepacks/changepack_log_ui_kit_forward_native_props.json new file mode 100644 index 000000000..64df34dcb --- /dev/null +++ b/.changepacks/changepack_log_ui_kit_forward_native_props.json @@ -0,0 +1,7 @@ +{ + "changes": { + "packages/components/package.json": "Patch" + }, + "note": "Input readOnly now reaches the native input, making the field read-only while keeping its clear button hidden; no new build errors.", + "date": "2026-10-24T00:00:00.000Z" +} diff --git a/packages/components/src/components/Input/__tests__/native-props.browser.test.tsx b/packages/components/src/components/Input/__tests__/native-props.browser.test.tsx new file mode 100644 index 000000000..e8f0374e1 --- /dev/null +++ b/packages/components/src/components/Input/__tests__/native-props.browser.test.tsx @@ -0,0 +1,29 @@ +import { describe, expect, it } from 'bun:test' +import { render } from 'bun-test-env-dom' + +import { Input } from '..' + +describe('Input native props', () => { + it('should render a read-only native input when readOnly is true', () => { + const { container } = render() + + expect(container.querySelector('input')?.getAttribute('readonly')).toBe('') + }) + + it('should hide the clear button when readOnly and a value are provided', () => { + const { container } = render() + + expect( + container.querySelector('[aria-label="clear-button"]'), + ).not.toBeInTheDocument() + }) + + it('should show the clear button when a value is provided without readOnly', () => { + const { container } = render() + + expect( + container.querySelector('[aria-label="clear-button"]'), + ).toBeInTheDocument() + expect(container.querySelector('input')).not.toHaveAttribute('readonly') + }) +}) diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx index 4f2a98e1a..e4bc8d227 100644 --- a/packages/components/src/components/Input/index.tsx +++ b/packages/components/src/components/Input/index.tsx @@ -176,6 +176,7 @@ export const Input = forwardRef(function Input( pl={icon ? '36px' : '12px'} pr={allowClear ? '36px' : '12px'} py="12px" + readOnly={readOnly} styleOrder={1} transition="all 0.1s ease-in-out" typography={typography}