Material-ui: [TextField] Chrome 자동 완성 처리

이 문제를 해결해야합니다! # 14453은 문제를 해결하는 몇 가지 방법을 제공 할 수 있습니다.
@garygrubb 궁금합니다. 문제를 해결하기 위해 지속적으로 사용할 수있는 재현 예제를 만들 수 있습니까? 감사합니다! 이것은 Google 기본 로그인 양식과 매우 유사합니다.

응답이 지연되어 죄송합니다. 나는 이번 주 후반에 시간이 허락되면 작은 복제품을 만들려고 노력할 것입니다. 그 동안 임시 수정이 있습니다. Textfield 중 하나에 autoFocus를 설정하면 문제가 해결됩니다.

`                            <TextField
                                required
                                **autoFocus**
                                variant="outlined"
                                id="username"
                                label="mobile number"
                                defaultValue=""
                                margin="normal"
                                name="username"
                                type="tel"
                                onChange={this.handleChange}
                                error={!this.state.validMobile}
                                autoComplete="tel-national username"
                            />

텍스트 필드 중 하나에 autoFocus를 설정하면 문제가 해결됩니다.

나를 위해 작동하지 않는 것 같습니다.

또한 자동으로 채워진 텍스트의 노란색 배경이 있습니다. 재정의 할 수 있습니까?

@garygrubb 테마 재정의를 통해이 작업을 수행했습니다.

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        '&:-webkit-autofill': {
          transitionDelay: '9999s',
          transitionProperty: 'background-color, color',
        },
      },
    },
  },
});

이상적이지는 않지만 무언가입니다.

대안은 상자 그림자를 사용하여 입력을 채우는 것입니다 : https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

@oliviertassinari 이것은 트릭을 할 수 있습니다 : https://stackoverflow.com/a/41530164/396889

또한 참고 : https://github.com/facebook/react/issues/1159

@MarkMurphy 문제를 어떻게 재현 할 수 있는지

@MarkMurphy 문제를 어떻게 재현 할 수 있는지

나를 위해 간단한 사용자 이름과 비밀번호 양식을 만들고 Chrome이 내 자격 증명을 기억하도록 허용했습니다.

MacOS High Sierra 10.13.6에서 Chrome 72.0.3626.119 사용

@ material-ui / core 버전 "3.8.1"
@ material-ui / styles 버전 "3.0.0-alpha.6"

@MarkMurphy https://material-ui.com/getting-started/page-layout-examples/sign-in/으로 재현 할 수

이것은 텍스트 필드 표준 변형입니다. 따라서 두 가지 문제를 알 수 있습니다.

1. 포커스 활성 상태가 감지되지 않고 # 14132에 수정이 있습니다.
2. 채우기 상태는 페이지로 포커스를 이동할 때만 감지됩니다.

지금 설명 된 변형을 사용해 보겠습니다. 이 페이지를 사용할 수 있습니다 : https://deploy-preview-14499--material-ui.netlify.com/getting-started/page-layout-examples/sign-in-side/

크롬 자동 완성 문제인 것 같습니다. 크롬의 자동 완성을 감지하는 방법이 제공 되었다면 쉽게 고칠 수 있지만 해결책을 알지 못합니다. 유일한 해결책은 모든 텍스트 필드에 대해 자동 완성 / 자동 완성을 끄는 것입니다.

@ ymoon715 위에 링크를 게시 한 다른 실행 가능한 솔루션이 하나

해결 방법 문서 :

• 자동 완성 비활성화 : https://stackoverflow.com/a/30976223/882337

• 재정의 스타일 : http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs

• 자동 완성 스타일 비활성화 (위 두 번째 링크의 스 니펫) :

input:-webkit-autofill,
.my-class:-webkit-autofill {
    -webkit-transition-delay: 9999999s;
}

감사합니다 @cezarderevlean , 노란색 배경을 제거했습니다. 이제 회색으로 표시된 도우미 텍스트를 제거하는 방법을 알아 내면됩니다.

위에 넣은 첫 번째 링크에 설명 된대로 자동 완성을 "비활성화"하지 않으려면 자동 완성 후에는 코드 변경으로 인해 페이지가 새로 고쳐진 경우에만 스크린 샷처럼 나타납니다.
개발 (내가 테스트 한 한). 정상적인 브라우저로드 / 새로 고침은 괜찮을 것이며 자리 표시자가 줄어들 것입니다.

또한 위에서 말한 것이 사실이 아니라면 구현할 수있는 한 가지 해결 방법은 항상 TextField 에서이 소품으로 자리 표시자를 축소하는 것입니다.

InputLabelProps={{
    shrink: true,
}}

@cezarderevlean 감사합니다. 당신이 옳습니다. 정상적인 브라우저 새로 고침이 제대로 작동합니다.

나는 그것을 놓친 방법을 모르지만 @MarkMurphy 는 비슷한 해결책을 가지고 있었고 사용 사례에 대해 약간 더 깨끗한 재료 테마 재정의를 사용합니다. 감사합니다 마크.

위에 넣은 첫 번째 링크에 설명 된대로 자동 완성을 "비활성화"하지 않으려면 자동 완성 후에는 코드 변경으로 인해 페이지가 새로 고쳐진 경우에만 스크린 샷처럼 나타납니다.
개발 (내가 테스트 한 한). 정상적인 브라우저로드 / 새로 고침은 괜찮을 것이며 자리 표시자가 줄어들 것입니다.

또한 위에서 말한 것이 사실이 아니라면 구현할 수있는 한 가지 해결 방법은 항상 TextField 에서이 소품으로 자리 표시자를 축소하는 것입니다.

InputLabelProps={{
    shrink: true,
}}

고마워, 이것은 나를 위해 일했다.

사용자 이름 필드에 autoFocus 을 설정하고 암호 필드에 autoComplete='new-password' 설정하는 것도 나에게 트릭을 제공했습니다.

업데이트 : 여기서 총을 쏜 것 같습니다. 이유는 무엇입니까?

값의 존재를 감지하는 대신 (https://github.com/mui-org/material-ui/issues/14427#issuecomment-466054906 참조) 입력의 실제 값을 얻고 자하는 사람들을 위해, I ' 이 SO 문서에 자세히 설명 된 솔루션이 있습니다. https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/56157489#56157489. 링크에는 일반적으로 Chrome에 영향을 미치는이 전반적인 문제에 대한 좋은 기록이 있습니다.

  componentDidMount() {
    var evt = new MouseEvent("click", {
      view: window,
      clientX: 0
    });
    window.dispatchEvent(evt);
    let iterations = 0;

    const interval = setInterval(() => {
      const value = this.inputs.email.value;
      // plain js alternative:
      // const value = document.getElementById("email").value;
      if (!!value || iterations > 20) {
        console.log(value);
        return clearInterval(interval);
      }

      iterations++;
      console.log("not found -> repeat");
    }, 100);
  }

기본적으로 입력에 마우스를 강제로 클릭하여 Chrome이 입력에 값을 설정합니다. 그런 다음 나중에 값이 준비되면 값을 가져옵니다. 확실히 해키이지만 Chrome은 옵션이 없습니다 ... (SO 기사에서 Chrome의 자세에 대한 자세한 내용 참조).

요약 : 이것은 브라우저 문제입니다. 양식을 자동으로 채울 때 입력 이벤트를 일관되게 실행하지 않습니다.

이것은 브라우저 수준의 문제입니다. 페이지 내부를 클릭 한 다음 다시로드하면 입력 이벤트가 올바르게 전달됩니다. 페이지를 클릭하면 내비게이션 바를 클릭하면 두 번째 입력에서만 작동이 중지됩니다. 페이지에 대한 링크를 복사하고 navbar에 입력하여 페이지에 도착하면 작동합니다.

폴링되었을 때 자동으로 채워지더라도 입력 값이 여전히 비어 있기 때문에 모든 브라우저에서이 문제를 해결할 수 있는지조차 모르겠습니다. 크롬만을위한 깔끔한 트릭이 있습니다. Chrome에만 이러한 문제가 있는지 조사합니다.

@ eps1lon Chromium과 관련된 경우 Chromium에서 버그를 열었습니까?

이것은 나를 위해 작동하지 않습니다 : https://github.com/mui-org/material-ui/issues/718#issuecomment -529064043.
작동합니다 : InputLabelProps = {{shrink : true}}, 비록 항상 축소 된 상태로 유지됩니다.

다음 차이점은 문제를 해결하는 것 같습니다.

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index d258e5b71d..a7aebb1288 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -311,6 +311,10 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   };

+  // Check the input state on mount, in case it was filled by the user
+  // or auto filled by the browser before the hydration (for ssr).
+  React.useEffect(() => {
+    checkDirty(inputRef.current);
+  }, []);
+
   const handleClick = event => {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();

누구든지 수정의 품질을 확인할 수 있습니까?

@oliviertassinari 머티리얼 UI에 작동하는 구성 요소가 있어야하지만 위에서 언급 한 @ eps1lon 과 같은 Chromium 버그 인 경우이 해결 방법은 일시적으로 만 수정해야하며 문제는 Chromium 내에서 수정해야합니다. 이것이 Chromium의 버그인지 아니면 MUI 버그인지 확인할 수 있습니까?

Chromium 버그 인 경우이를 위해 크롬에서 열린 버그가 있는지 확인해야합니다. 유사 : 크롬 검색 결과

(https://github.com/mui-org/material-ui/issues/14427#issuecomment-524535710)

이 시점에서 Chrome의 문제라고 생각하지 않습니다. React와 서버 측 렌더링 문제라고 생각합니다. 사용자가 입력에 콘텐츠를 작성하면 React hydrate 전에는 이에 대한 알림을받지 않습니다 : https://github.com/facebook/react/issues/12955

@oliviertassinari 하지만 create-react-app 개발 서버에서 서버 측 렌더링이 일어나지 않습니까?

• 반응 버그 보고서 : https://github.com/facebook/react/issues/1159
• iOS 관련 버그 : https://bugs.chromium.org/p/chromium/issues/detail?id=895898

문제는 onInput 또는 onChange 핸들러가 자바 스크립트를 통해 설정되어야 할 가능성이 가장 높습니다. 크롬 자동 완성 후에 이런 일이 발생하면 이러한 이벤트가 손실됩니다. 자바 스크립트가 많을수록 이벤트를 잃을 가능성이 높아집니다. React는 이벤트가 발생하는 시간을 줄이기위한 노력을 시작했습니다. 이것은 수화 된 UI에 도움이 될 것입니다.

다른 문제는 값이 자동으로 채워져도 input.value 가 설정되지 않는 경우가 있다는 것입니다. 의도하지 않은 부작용 (예 : 양식 유효성 검사)이있을 가능성이있는 입력을 집중 / 흐리게 한 후에 만.

재현 가능한 예가 거의없는 보고서가 거의 없기 때문에이 문제를 제대로 조사하는 것은 매우 어렵습니다. 이론적으로 @oliviertassinari https://github.com/mui-org/material-ui/issues/14427#issuecomment -530145849의 수정이 적어도 커버해야하는 것처럼 보이지만 문제를 제대로 식별 할 때까지 수정을 적용해서는 안됩니다. 삭제 된 이벤트.

@ eps1lon 흥미 https://material-ui.com/getting-started/page-layout-examples/sign-in/ (개발 모드, 내 로컬 환경)에서 재현 할 수있는 유일한 문제에 초점을 맞추고 있습니다. 마지막 테스트 (동 기적으로 변경 이벤트 수신)를 실행하여 "수화 전에 트리거 된 이벤트"가 문제의 원인인지 확인해야합니다. 적어도 React가 https://github.com/facebook/react/issues/12955에 관심을 보일 때까지 처리 할 가치가 있다고 생각합니다.

@croraf CRA로 문제를 어떻게 재현합니까?

"수화 전에 트리거 된 이벤트"문제가 https://github.com/mui-org/material-ui/issues/14132#issuecomment -453657016에서도 우리에게 영향을 미친다고 생각합니다.

@oliviertassinari CRA는 여기서는 관련이 없지만 다음 코드를 CRA와 함께 사용할 수 있습니다 (이 코드 샌드 박스는 내부적으로 CRA를 사용하기도합니다) : https://codesandbox.io/s/textinput-bug-hsv9m

A)이 코드 샌드 박스에서 재현하려면 :
1) 새 창에서이 샌드 박스의 앱 미리보기를 엽니 다.
2) 자격 증명 입력 및 저장 (Chrome 대화 상자에서 저장을 요청한 후)
3) 창을 새로 고침하여 문제를 확인합니다 (Chrome이 자동 완성을 적용하므로). 새로 고침시 문제가 일관되게 나타나지 않지만 F5 (빠른 이중 새로 고침)를 두 번 클릭하면 거의 일관되게 재현됩니다.

B) 또한 비슷한 것을 발견했습니다
1) codesandbox 앱 미리보기에서 (별도의 앱 창에 있지 않음).
2) 양식 작성 및 제출 (Chrome에 사용자 이름 / 비밀번호 조합 저장)
3) 앱 미리보기 만 다시로드합니다. 양식은 즉시 자동으로 채워지지 않습니다. (material-ui sandbox에서 자동으로 채워진 필드 내용을 삭제할 수 있습니다)
4) 사용자 이름 텍스트 필드를 클릭하십시오. Chrome은 사용자를 선택하도록 제안합니다.
5) 사용자를 가리키고 암호 필드에서 발생하는 문제를 확인합니다.

@ eps1lon 핸들러가 설정되기 전에 Chrome이 자동 완성 관련 이벤트를 실행하는 문제 일 수 있습니다.

그러나 React가 DOM에 입력 파일을 생성하기 전에 Chrome은 어떻게 자동 완성 할 수 있으며, JavaScript가 이벤트 핸들러를 설정하기에 충분하기 전에 React가 DOM에서이를 생성하는 방법은 무엇입니까?

이것은 나에게 수상한 것처럼 보이며 SSR에서 발생할 수 있습니다 (어떻게 작동하는지 모르겠지만). 그러나 CRA 개발 서버는 SSR을 사용하지 않습니다.

@ eps1lon 핸들러가 설정되기 전에 Chrome이 자동 완성 관련 이벤트를 실행하는 문제 일 수 있습니다.

이것은 반응에 의해 수화되고 현재 재생산이 없었기 때문에 이론적으로 만 구성된 정적 html에만 적용됩니다. 이제 실제 문제를 조사 할 수 있습니다.

Chrome v76.0.3809.132, macOS v10.14.6에서 문제를 재현 할 수 없습니다 .
Chrome v76.0.3809.87, Windows 10에서 문제의 일부를 재현 할 수 있습니다 .

동일한 설정 인 Chrome v76.0.3809.132, macOS v10.14.6에서 문제를 재현 할 수 있습니다 .

내 솔루션 :

import { isChrome, osName} from "react-device-detect";
.....
.....

  const isChromeOSX = osName === 'Mac OS' && isChrome

  const [shrink, setShrink] = useState(isChromeOSX ? true : undefined)

  useEffect(() => {
    if(isChromeOSX) {
      const listen = () => {
        setShrink(undefined)
        window.removeEventListener('click',listen)
      }
      window.addEventListener('click', listen);
      return () => {
        window.removeEventListener('click',listen)
      };
    }
  }, [])

  return  <TextField
          .....
          variant="outlined"
          InputLabelProps={{ shrink }}
        />

다음 diff는 내가 재현 할 수있는 문제의 발생을 해결합니다. 누군가 확인할 수 있습니까?

diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 0ede7ca404..c7cb22aeb9 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -145,6 +145,14 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     };
   }

+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
+
   const childContext = {
     adornedStart,
     disabled,
@@ -156,16 +164,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     onBlur: () => {
       setFocused(false);
     },
-    onEmpty: () => {
-      if (filled) {
-        setFilled(false);
-      }
-    },
-    onFilled: () => {
-      if (!filled) {
-        setFilled(true);
-      }
-    },
+    onEmpty,
+    onFilled,
     onFocus: () => {
       setFocused(true);
     },
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index d258e5b71d..9cb6c94f43 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -116,6 +116,13 @@ export const styles = theme => {
       '&$disabled': {
         opacity: 1, // Reset iOS opacity
       },
+      '&:-webkit-autofill': {
+        animationDuration: '5000s',
+        animationName: '$auto-fill',
+      },
+    },
+    '<strong i="6">@keyframes</strong> auto-fill': {
+      from: {},
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
@@ -239,17 +246,20 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   }, [muiFormControl, disabled, focused, onBlur]);

+  const onFilled = muiFormControl && muiFormControl.onFilled;
+  const onEmpty = muiFormControl && muiFormControl.onEmpty;
+
   const checkDirty = React.useCallback(
     obj => {
       if (isFilled(obj)) {
-        if (muiFormControl && muiFormControl.onFilled) {
-          muiFormControl.onFilled();
+        if (onFilled) {
+          onFilled();
         }
-      } else if (muiFormControl && muiFormControl.onEmpty) {
-        muiFormControl.onEmpty();
+      } else if (onEmpty) {
+        onEmpty();
       }
     },
-    [muiFormControl],
+    [onFilled, onEmpty],
   );

   useEnhancedEffect(() => {
@@ -311,6 +321,12 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   };

+  // Check the input state on mount, in case it was filled by the user
+  // or auto filled by the browser before the hydration (for SSR).
+  React.useEffect(() => {
+    checkDirty(inputRef.current);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleClick = event => {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
@@ -354,6 +370,10 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }

+  const handleAutoFill = () => {
+    // Provide a fake value as Chrome might not let you access it for security reasons.
+    checkDirty({ value: 'x' });
+  };
+
   return (
     <div
       className={clsx(
@@ -399,6 +419,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
           defaultValue={defaultValue}
           disabled={fcs.disabled}
           id={id}
+          onAnimationStart={handleAutoFill}
           name={name}
           onBlur={handleBlur}
           onChange={handleChange}

한 부분은 https://github.com/tocco/tocco-client/commit/cb3b9b59994380f17c6650ffe4b63f96948072b6에서 영감을 받았습니다

material-ui sandbox (문서 페이지)를 사용하여이 수정 사항을 로컬에서 테스트했으며 적용 할 때 문제를 재현 할 수 없습니다.
이것이 문제였습니다.

이 수정으로 https://github.com/mui-org/material-ui/issues/14427#issuecomment -530503051의 파트 B에 언급 된 유사한 문제를 재현 할 수 없습니다.
여기에서 본 것 :

@oliviertassinari @ eps1lon 비즈니스 응용 프로그램에서 v4.4.3을 테스트했는데 오류가 표시되지 않았습니다. (어쩌면 가장 우아한되지는 않지만) 문제를 해결하고 항상 레이블 제기에 내가 해킹을 제거 그것은 패치를 보인다 그래서 ( InputLabelProps={{ shrink: true }} 정말 좋은 해킹이 레이블로도 입력이 경우 오르지되었다되지 않은 필드가 비어 있음).

트윗 담아 가기
불행히도 이제 사소한 새로운 문제가 있습니다. 자동 완성으로 재생할 때. 사용자를 선택한 다음 암호를 삭제 한 다음 필드가 비어 있어도 레이블이 계속 올라간 상태로 다시 선택해보십시오.

->

크롬 : 77
Ubuntu : 18.04

@oliviertassinari @ eps1lon @croraf 나는 또한 문제가 더 이상 존재하지 않는 내 응용 프로그램에서 테스트했습니다. 당신의 도움을 주셔서 감사합니다.

@garygrubb 위의 게시물에서 언급 한 미묘한 오류가 있는지 확인하십시오.

@coraf 예 데스크톱 Chrome 버전 76.0.3809.132 (공식 빌드) (64 비트)에서 동일한 문제를 재현 할 수있었습니다. 모바일 버전과 파이어 폭스는 괜찮아 보입니다.
이 문제에 대한 새로운 문제를 열면 따라갈 수 있도록 나를 태그 해주세요.

다음이 도움이 될까요?

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 439e8afa7..f0ab8bb66 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -373,6 +373,12 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
   }

   const handleAutoFill = () => {
+    // The change event is correcty triggered when the input is focused.
+    // There is no need to detect autofill.
+    if (fcs.focused) {
+      return;
+    }
+
     // Provide a fake value as Chrome might not let you access it for security reasons.
     checkDirty({ value: 'x' });
   };

@oliviertassinari 좋아요, mui 문서 페이지에서 나머지 문제를 일관되게 재현했습니다.
참고 :이 나머지 문제는 원래 문제와 비교할 때 매우 사소한 문제이며 아마도 그다지 높지 않을 것입니다.

1. localhost : 3000에 대한 크롬 저장소 자격 증명 (사용자 이름 및 암호) 만들기

2. http : // localhost : 3000 / components / text-fields # outlined 새로 고침
   나는 다음과 같은 것을 얻는다.
   

3. 이메일 필드를 수동으로 삭제하지만 비밀번호는 여전히 자동으로 채워집니다.
   

4. 이메일 필드를 클릭하십시오. Chrome은 해당 페이지 ( localhost:3000 )의 저장된 사용자가있는 드롭 다운을 표시합니다.
5. 드롭 다운에서 제공된 사용자 중 한 명 위로 마우스를 가져 가지만 선택하지는 마십시오. Chrome은 필드에서 해당 사용자 선택의 미리보기를 표시합니다.
6. 드롭 다운을 클릭하여 닫습니다.

이 상황이 발생합니다.

@oliviertassinari 귀하의 추가 수정은 제가 설명한 나머지 문제를 해결하는 것 같습니다.

그러나 나는 문제의 또 다른 맛을 발견했습니다 : D
복제 단계는 위와 비슷하지만 3 단계에서 수동으로 암호를 지 웁니다.

1. 사용자 이름 및 비밀번호 필드를 모두 삭제하십시오.

이것은 마지막에 다음과 같은 결과 문제를 제공합니다.

이것은 마지막에 다음과 같은 결과 문제를 제공합니다.

@croraf 오 이런, 나는 이것이 오는 것을 보지 못했습니다! 네, 말이 되네요.

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 763ab105c..9dce66f9d 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -86,6 +86,7 @@ export const styles = theme => {
       // Make the flex item shrink with Firefox
       minWidth: 0,
       width: '100%', // Fix IE 11 width issue
+      animationName: '$auto-fill-cancel',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -123,6 +124,9 @@ export const styles = theme => {
     '<strong i="9">@keyframes</strong> auto-fill': {
       from: {},
     },
+    '<strong i="10">@keyframes</strong> auto-fill-cancel': {
+      from: {},
+    },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
       paddingTop: 4 - 1,
@@ -380,9 +384,11 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }

-  const handleAutoFill = () => {
+  const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty({ value: 'x' });
+    checkDirty(
+      event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : { value: 'x' },
+    );
   };

   return (

에서:

• https://github.com/klarna/ui/blob/v4.10.0/Field/index.jsx#L105 -L113
• https://codedaily.io/tutorials/69/Animated-Input-Label-with-Chrome-Autofill-Detection-in-React

4.4.2

4.4.3

제안 된 패치

@oliviertassinari , @croraf- 프로덕션에서 테스트되었으며 예상대로 작동합니다. 감사.
내가 테스트하기를 원하는 다른 버그 수정에 나를 태그 해주세요. 기꺼이 도와 드리겠습니다.

그것을 듣고 행복합니다.

어두운 테마를 지원하지 않습니까?

@MAkerboom 색상을 더 진한 파란색으로 변경하는 것을 고려할 수 있습니다. 실험 해보고 싶은 것이 있습니까?

@oliviertassinari 윤곽선이 표시되고 여전히 텍스트와 충분한 대비가있는 한 괜찮아 보입니다.

@MAkerboom 내가 생각

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 71d0bcc94..4b681cba1 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -106,6 +106,12 @@ export const styles = theme => {
     /* Styles applied to the `input` element. */
     input: {
       padding: '27px 12px 10px',
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
+        WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
+        borderTopLeftRadius: 'inherit',
+        borderTopRightRadius: 'inherit',
+      },
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index f60c4e5d5..376e37ba8 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -65,6 +65,11 @@ export const styles = theme => {
     /* Styles applied to the `input` element. */
     input: {
       padding: '18.5px 14px',
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
+        WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
+        borderRadius: theme.shape.borderRadius,
+      },
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {

너는 그렇게하는 것이 괜찮 니? 풀 요청을 제출 하시겠습니까? :)

훨씬 낫다! 고마워. PR을 시도합니다

<AutoComplete/> 를 사용하는 동안이 버그를 보았습니다. 텍스트 필드에 초점을 맞출 때 레이블이 "축소"되지 않습니다. Firefox와 Chrome에서 이것을 보았습니다 (다른 브라우저는 테스트하지 않았습니다). v4.5.0에서 v4.5.2로 업그레이드하면 문제가 해결되었습니다. 이 문제와 관련된 PR이 책임이 있다고 생각하므로 감사합니다!

FWIW는 크롬이 자동으로 채워진 입력에 사용자 정의 색상을 표시하지 않도록하는 테마 재정의입니다.

theme = {
    overrides: {
        MuiInputBase: {
            root: {
                fontFamily: '"Lato", serif',
                "& input": {
                    "&:-webkit-autofill": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                    "&:-webkit-autofill:focus": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                    "&:-webkit-autofill:hover": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                },
            },
        },
    }
}

@armellarcier 공유해 주셔서 감사합니다. 사용자 정의 색상을 제거하는 데주의를 기울이고, 사용자를 돕기위한 것이라고 생각합니다. 또한 보안 관점에서 흥미로울 수 있습니다. 올바른 도메인 이름을 사용하고 있는지 더 잘 알 수 있습니다. 그렇지 않으면 자동 완성이 작동하지 않습니다.