fix(ac): fix ac text input (#1023)

fix ac text input

packages/console/src/components/TextInput/index.module.scss

@@ -8,6 +8,7 @@
   transition-timing-function: ease-in-out;
   transition-duration: 0.2s;
   padding: _.unit(2) _.unit(3);
+  background: var(--color-layer-1);
   font: var(--font-body-medium);
 
   &.withIcon {
@@ -29,9 +30,9 @@
   input {
     width: 100%;
     appearance: none;
-    background: var(--color-layer-1);
     color: var(--color-text);
     font: var(--font-body-medium);
+    background: transparent;
     padding: 0;
 
     &::placeholder {
@@ -40,7 +41,7 @@
 
     // Overwrite webkit auto-fill style
     &:-webkit-autofill {
-      box-shadow: 0 0 0 30px var(--color-control-background) inset;
+      box-shadow: 0 0 0 30px transparent inset;
       transition: background-color 5000s ease-in-out 0s;
       -webkit-text-fill-color: var(--color-text);
     }
@@ -50,10 +51,6 @@
     background: var(--color-inverse-on-surface);
     color: var(--color-caption);
     border-color: var(--color-border);
-
-    input {
-      background: none;
-    }
   }
 
   &.readOnly {
@@ -61,11 +58,6 @@
     color: var(--color-text);
     border-color: var(--color-border);
 
-    input {
-      background: none;
-    }
-
-
     &:focus-within {
       border-color: var(--color-border);
       outline-color: transparent;

packages/console/src/components/TextInput/index.tsx

@@ -1,35 +1,32 @@
 import classNames from 'classnames';
-import React, { forwardRef, HTMLProps, ReactNode } from 'react';
+import React, { forwardRef, HTMLProps, ReactNode, ForwardedRef } from 'react';
 
 import * as styles from './index.module.scss';
 
-// https://github.com/yannickcr/eslint-plugin-react/issues/2856
-/* eslint-disable react/require-default-props */
 type Props = HTMLProps<HTMLInputElement> & {
   hasError?: boolean;
   icon?: ReactNode;
-  disabled?: boolean;
-  readOnly?: boolean;
 };
-/* eslint-enable react/require-default-props */
 
-const TextInput = forwardRef<HTMLInputElement, Props>(
-  ({ hasError = false, icon, disabled, readOnly, ...rest }, reference) => {
-    return (
-      <div
-        className={classNames(
-          styles.container,
-          hasError && styles.error,
-          icon && styles.withIcon,
-          disabled && styles.disabled,
-          readOnly && styles.readOnly
-        )}
-      >
-        {icon && <span className={styles.icon}>{icon}</span>}
-        <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
-      </div>
-    );
-  }
-);
+const TextInput = (
+  { hasError = false, icon, disabled, className, readOnly, ...rest }: Props,
+  reference: ForwardedRef<HTMLInputElement>
+) => {
+  return (
+    <div
+      className={classNames(
+        styles.container,
+        hasError && styles.error,
+        icon && styles.withIcon,
+        disabled && styles.disabled,
+        readOnly && styles.readOnly,
+        className
+      )}
+    >
+      {icon && <span className={styles.icon}>{icon}</span>}
+      <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
+    </div>
+  );
+};
 
-export default TextInput;
+export default forwardRef(TextInput);