Material-ui: [TextField] Обработка автозаполнения Chrome

Это необходимо для решения этой проблемы! # 14453 может предоставить несколько способов решения проблемы.
@garygrubb Мне интересно, можете ли вы создать пример воспроизведения, который мы можем последовательно использовать для решения проблемы? Спасибо! Это очень похоже на основную форму входа в Google:

Приносим извинения за задержку с ответом. Я постараюсь создать небольшую репродукцию, когда позволит время, позже на этой неделе. Между тем, у меня есть временное исправление - установка автофокуса на любом из текстовых полей решает проблему.

`                            <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"
                            />

установка автофокуса для любого из текстовых полей решает проблему.

Мне кажется, это не работает.

Также обратите внимание на желтый фон для автоматически заполненного текста, можно ли его переопределить?

@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 запомнить мои учетные данные.

Использование Chrome 72.0.3626.119 в MacOS High Sierra 10.13.6

@ 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-formed-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), я ' я придумал решение, подробно описанное в этой статье 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 не оставляет нам вариантов ... (подробности о позиции Chrome см. В статье SO).

TL; DR: это проблема браузера. Они не запускают события ввода при автозаполнении форм.

Это проблема на уровне браузера. Если я щелкаю внутри страницы, а затем перезагружаю ее, правильно отправляет события ввода. Если я нажимаю на страницу, щелкаю на панели навигации, она перестает работать только при втором входе. Если я попадаю на страницу, копируя ссылку на страницу и вводя ее в навигационную панель, это также работает.

Я даже не уверен, что мы сможем исправить это для всех браузеров, поскольку при опросе входное значение все еще пустое, даже если оно автозаполнено. Только для хрома есть хитрый трюк. Проверим, есть ли эти проблемы только у хрома.

@ 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 Необходимо наличие рабочего компонента в пользовательском интерфейсе материала, но если это ошибка Chromium, как упоминалось выше в @ eps1lon , это временное исправление должно быть временным, и проблема должна быть исправлена ​​в Chromium. Можете ли вы подтвердить, что это ошибка в Chromium или просто ошибка MUI?

Если это ошибка Chromium, мы должны проверить, открыта ли для этого ошибка в Chrome, а если не открыть ее? Что-то вроде: результат поиска хрома

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

Я не думаю, что сейчас проблема с Chrome. Я думаю, что это проблема с React и рендерингом на стороне сервера. Если пользователь записывает контент во вход, до того, как React Hydrate, мы никогда об этом не уведомляемся: https://github.com/facebook/react/issues/12955

@oliviertassinari Но рендеринг на стороне сервера не происходит на сервере разработки приложений create-response-app?

• отчет об ошибке реагировать: https://github.com/facebook/react/issues/1159
• Ошибка, специфичная для iOS: https://bugs.chromium.org/p/chromium/issues/detail?id=895898

Проблема, скорее всего, в том, что любые обработчики onInput или onChange нужно настраивать через javascript. Если это происходит после автозаполнения хрома, эти события теряются. Чем больше javascript, тем больше вероятность потерять события. React начал попытку сократить время срабатывания событий, не реагируя на них. Это поможет увлажненным пользовательским интерфейсам.

Другая проблема заключается в том, что иногда input.value не устанавливается, хотя значение заполняется автоматически. Только после фокусировки / размытия ввода, который может иметь непредвиденные побочные эффекты (например, проверка формы).

Правильно исследовать эту проблему очень сложно, так как почти нет отчетов, которые можно воспроизвести. Мы не должны применять какое-либо исправление, пока мы не определим проблему должным образом, хотя теоретически исправление от @oliviertassinari https://github.com/mui-org/material-ui/issues/14427#issuecomment -530145849 выглядит так, как будто оно должно, по крайней мере, покрывать упали события.

@ eps1lon Интересно. Предлагаемый мной diff фокусируется на единственной проблеме, которую я мог воспроизвести на https://material-ui.com/getting-started/page-layout-examples/sign-in/ (в режиме разработки, в моем локальном env). Мне нужно было бы запустить последний тест (синхронно прослушивать событие изменения), чтобы подтвердить, что «событие, инициированное до гидратации», является корнем проблемы. Я думаю, что этим стоит заняться, по крайней мере, до тех пор, пока React не проявит некоторый интерес к https://github.com/facebook/react/issues/12955.

@croraf Как воспроизвести проблему с CRA?

Я считаю, что проблема «событие, инициированное до гидратации» также влияет на нас в https://github.com/mui-org/material-ui/issues/14132#issuecomment -453657016.

@oliviertassinari CRA здесь не имеет значения, но следующий код можно использовать с CRA (возможно, этот codeandbox даже использует CRA внутри): https://codesandbox.io/s/textinput-bug-hsv9m

A) Чтобы воспроизвести его в этой кодовой папке:
1) откройте предварительный просмотр приложения этой песочницы в новом окне.
2) введите и сохраните учетные данные (после того, как диалоговое окно Chrome попросит их сохранить)
3) обновите окно, чтобы увидеть проблему (поскольку Chrome применит автозаполнение). Проблема не возникает постоянно при обновлении, но при двойном щелчке по F5 (быстрое двойное обновление) она воспроизводится почти постоянно.

Б) Также я нашел нечто подобное
1) В предварительном просмотре приложенияcodeandbox (не в отдельном окне приложения).
2) Заполните и отправьте форму (чтобы Chrome сохранил комбинацию имени пользователя и пароля)
3) Перезагрузите только предварительный просмотр приложения. Форма заполняется не сразу. (в песочнице material-ui можно просто удалить автозаполненное содержимое полей)
4) Щелкните текстовое поле имени пользователя. Chrome предложит вам выбрать пользователя.
5) Наведите указатель мыши на пользователя и посмотрите, что происходит в поле пароля.

@ eps1lon Говорит, что проблема может заключаться в том, что Chrome запускает события, связанные с автозаполнением, до настройки обработчиков.

Но как Chrome может даже выполнять автозаполнение до того, как React создаст входные поля в DOM, и как React создает их в DOM до того, как javascript выполнится достаточно для настройки обработчиков событий?

Мне это кажется подозрительным и может случиться с 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 (страница документации) и не могу воспроизвести проблему, когда применяю ее.
Это была проблема:

С этим исправлением я не могу воспроизвести аналогичную проблему, упомянутую в части B https://github.com/mui-org/material-ui/issues/14427#issuecomment -530503051.
Тот, что виден здесь:

@oliviertassinari @ eps1lon Я тестировал v4.4.3 в своем бизнес-приложении и не видел ошибки. Таким образом, похоже, что патч (хотя, возможно, не самый элегантный) решил проблему, и я удалил хак, чтобы всегда поднимать метки ( InputLabelProps={{ shrink: true }} что на самом деле было не очень хорошим хаком, поскольку метки поднимались, даже если ввод поля были пустыми).

@oliviertassinari @ eps1lon
К сожалению, у меня есть небольшая новая проблема. При игре с автозаполнением. Выберите пользователя, затем удалите пароль, затем попробуйте снова выбрать (или что-то в этом роде), метки остаются поднятыми, даже если поля пусты: /

->

Хром: 77
Ubuntu: 18.04

@oliviertassinari @ eps1lon @croraf Я также тестировал его в своем приложении, и проблема больше не существует. Спасибо за вашу помощь.

@garygrubb Попытайтесь увидеть, заметили ли вы

@coraf Да, мне удалось воспроизвести ту же проблему на настольной версии Chrome 76.0.3809.132 (официальная сборка) (64-разрядная версия). Мобильная версия и firefox кажутся нормальными.
Если вы откроете для этого новый выпуск, отметьте меня, чтобы я мог следить за ним.

Помогло бы следующее?

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. Сделайте учетные данные Chrome store (имя пользователя и пароль) для localhost: 3000

2. Обновите http: // localhost : 3000 / components / text-fields #, выделенное
   Я получаю что-то вроде:
   

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: {

Это нормально для тебя? Вы хотите отправить запрос на перенос? :)

Намного лучше! Спасибо. постараюсь сделать пиар

Я видел эту ошибку при использовании <AutoComplete/> . Текстовое поле не будет «сжимать» свою метку при фокусировании на нем. Я видел это в Firefox и Chrome (другие браузеры не тестировал). Обновление с v4.5.0 до v4.5.2 устранило проблему. Я считаю, что PR, связанные с этой проблемой, несут ответственность, поэтому спасибо!

FWIW - это переопределение темы, чтобы Chrome не отображал пользовательские цвета на автозаполненных входах:

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 Спасибо, что поделились. Я был бы осторожен с удалением пользовательских цветов, я думаю, что это предназначено для помощи пользователям. Также может быть интересно с точки зрения безопасности, чтобы лучше знать, находитесь ли вы на правильном доменном имени, и вас не ловят (в противном случае автозаполнение не работает)