diff --git a/packages/eui/changelogs/upcoming/8271.md b/packages/eui/changelogs/upcoming/8271.md new file mode 100644 index 00000000000..74338f108f8 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8271.md @@ -0,0 +1,6 @@ +- Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. + +**Bug fixes** + +- Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. + diff --git a/packages/eui/src/components/form/field_text/field_text.styles.ts b/packages/eui/src/components/form/field_text/field_text.styles.ts index dd1b194e8ca..feeb82dd95f 100644 --- a/packages/eui/src/components/form/field_text/field_text.styles.ts +++ b/packages/eui/src/components/form/field_text/field_text.styles.ts @@ -26,14 +26,14 @@ export const euiFieldTextStyles = (euiThemeContext: UseEuiTheme) => { ${formStyles.focus} } - &:disabled { - ${formStyles.disabled} - } - &[readOnly] { ${formStyles.readOnly} } + &:disabled { + ${formStyles.disabled} + } + &:autofill { ${formStyles.autoFill} } diff --git a/packages/eui/src/components/form/field_text/field_text.tsx b/packages/eui/src/components/form/field_text/field_text.tsx index ef56133bbf7..b1bb2192316 100644 --- a/packages/eui/src/components/form/field_text/field_text.tsx +++ b/packages/eui/src/components/form/field_text/field_text.tsx @@ -31,6 +31,11 @@ export type EuiFieldTextProps = InputHTMLAttributes & */ fullWidth?: boolean; isLoading?: boolean; + /** + * Prevents user from changing input. + * + * Defaults to the value of `disabled` unless explicity defined otherwise. + */ readOnly?: boolean; inputRef?: Ref; @@ -74,7 +79,8 @@ export const EuiFieldText: FunctionComponent = (props) => { compressed, prepend, append, - readOnly, + disabled, + readOnly = disabled, // sync to prevent onChange unless explicitly defined controlOnly, ...rest } = props; @@ -103,6 +109,7 @@ export const EuiFieldText: FunctionComponent = (props) => { css={cssStyles} value={value} ref={inputRef} + disabled={disabled} readOnly={readOnly} {...rest} /> @@ -117,8 +124,8 @@ export const EuiFieldText: FunctionComponent = (props) => { fullWidth={fullWidth} isLoading={isLoading} isInvalid={isInvalid} - isDisabled={rest.disabled} compressed={compressed} + isDisabled={disabled} readOnly={readOnly} prepend={prepend} append={append}