[EuiFieldText] Prevent onChange event on disabled inputs (#8271)

elastic · Jan 23, 2025 · ee4999d · ee4999d
1 parent cea7326
commit ee4999d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/packages/eui/changelogs/upcoming/8271.md 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
@@ -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
@@ -31,6 +31,11 @@ export type EuiFieldTextProps = InputHTMLAttributes<HTMLInputElement> &
      */
     fullWidth?: boolean;
     isLoading?: boolean;
+    /**
+     * Prevents user from changing input.
+     *
+     * Defaults to the value of `disabled` unless explicity defined otherwise.
+     */
     readOnly?: boolean;
     inputRef?: Ref<HTMLInputElement>;
 
@@ -74,7 +79,8 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (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<EuiFieldTextProps> = (props) => {
         css={cssStyles}
         value={value}
         ref={inputRef}
+        disabled={disabled}
         readOnly={readOnly}
         {...rest}
       />
@@ -117,8 +124,8 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
-      isDisabled={rest.disabled}
       compressed={compressed}
+      isDisabled={disabled}
       readOnly={readOnly}
       prepend={prepend}
       append={append}