fix: fully disable inputs when disabled

elastic · Jan 11, 2025 · 4ffca69 · 4ffca69
1 parent 9959b18
commit 4ffca69
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
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
@@ -74,7 +74,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 +104,7 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
         css={cssStyles}
         value={value}
         ref={inputRef}
+        disabled={disabled}
         readOnly={readOnly}
         {...rest}
       />
@@ -117,8 +119,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}