Material-ui: [TextField] Автозаполнение форм не обновляет текст плавающей метки в текстовом поле

Вероятно, это хорошее место для начала ...

@illogikal не могли бы вы опубликовать

Ну вот:

Желтое выделение означает, что поля были заполнены автоматически. Как видите, пароль заполнен, но метка все еще на месте.

Мм, это интересно. @mbrookes Знаете ли вы, для всех типов ввода или только для ввода пароля?

Не уверен - я попытался поменять местами адрес и пароль, но автозаполнение не сработало ни для ввода известного пользователя / пароля, ни для сохранения нового. Мне нужно выяснить, как лучше всего протестировать другие области.

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

Здравствуйте! Мы столкнулись с этой проблемой. Есть ли что-нибудь, что мы можем сделать локально, чтобы попробовать и поэкспериментировать с некоторыми потенциальными исправлениями для этого? Или придется ждать рефакторинга?

У нас точно такая же проблема с полем пароля, указанным выше. В дополнение к этому у нас есть аналогичная проблема с простым TextField . У нас есть набор текста подсказки, который исчезает, если вы вводите значения. Однако, если мы устанавливаем значение при отображении страницы (глубокая ссылка), текст подсказки все еще виден позади фактического значения. Вероятно, это та же проблема или это будет что-то отдельное?

Вероятно, это та же проблема или это будет что-то отдельное?

Это похоже на другую проблему.

вдохновение для исправления: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

этот код можно добавить в onChange чтобы обновить state.isAutofilled

Chrome версии 49.0.2623.87 (64-разрядная) OS X El Capitan

если нажата какая-либо клавиша или щелкн мышкой - плавает корректно, но начальная загрузка нарушена.

Точно такая же проблема:

Есть идеи, ребята?

Возникла та же проблема.

Есть ли способ отключить автозаполнение, работающее с MUI?

@ kand617

Просто создайте пару полей и сделайте их скрытыми с помощью « display: none ». Пример:

Затем поместите свои настоящие поля внизу.

http://stackoverflow.com/questions/15738259/disables-chrome-autofill

какое-либо решение для запуска события onChange?

@devdlabs https://github.com/callemall/material-ui/pull/3372/files

@antoinerousseau Это будет объединено в мастере?

@devdlabs https://github.com/callemall/material-ui/pull/3372#issuecomment -191523369

Это может быть аналогичная проблема (та же основная причина, другое проявление?)

Я не вижу упомянутых проблем с анимацией, но высота контейнера TextField не учитывает верхнее поле ввода. Это приводит к тому, что TextField расширяется на 14 пикселей ниже контейнера. Это довольно простой способ обхода, но я вижу его только с автозаполнением:

Скоро это будет исправлено;)

хороший @nathanmarks , спасибо !!

и нашли ли вы способ обновления плавающей метки при автозаполнении хрома без нажатия на страницу?

Это все еще довольно болезненный вопрос.

Я пробовал использовать vanilla-autofill-event, но это не сработало.

Я использую redux-form (как и многие другие), и я нашел уродливый обходной путь (только для моей формы входа, меня не интересуют другие формы).
Я тестировал его только в хроме, поэтому используйте его на рассмотрение.

Когда я добавил скрытые поля имени пользователя и пароля, хром игнорировал всю форму (если не скрывать их с помощью display: none, о котором хром не заботился).

Итак, я использовал 4 (: разочарованных:) дополнительных поля. 2, чтобы хром игнорировал мою форму (autocomplete = off не работал) и еще 2 в другой поддельной форме, чтобы заполнить хром, чем в componentDidMount. Я добавил тайм-аут, который скопировал значения из поддельных полей в настоящие с использованием redux событие изменения формы:

class Login extends Component {
  // This was tested under chrome only. It's ugly, but it works. Code was modified a bit for simplicity so it might not work out of the box.

  componentDidMount() {
    // Fix chrome auto-fill
    setTimeout(() => {
      const { change, dispatch }= this.props;
      if (this.refs.usernameAutoFill.value && ! this.refs.username.value) {
        dispatch(change('username', this.refs.usernameAutoFill.value));
      }
      if (this.refs.passwordAutoFill.value && !this.refs.password.value) {
        dispatch(change('password', this.refs.passwordAutoFill.value));
      }
    }, 500);
  }

  render() {
    const styles = {
      autofill: {
        height: 0,
        width: '1px',
        position: 'absolute',
        left: 0,
        top: 0
      }
    };

    return (
      <div>
        <form style={styles.autofill}>
          <input type="text" ref="usernameAutoFill" name="usernameAutoFill" />
          <input type="password" ref="passwordAutoFill" name="passwordAutoFill" />
        </form>
        <form autocomplete="off">
          <div style={styles.autofill}><input type="text" name="fakeusername" /><input type="password" name="fakepassword" /></div>
          <Field name="username" component={() => <TextField ref="username" name="username" floatingLabelText="Username" />}/>
          <Field name="password" component={() => <TextField ref="password" name="password" type="password" floatingLabelText="Password" />}/>
          <RaisedButton primary={true} label="Login" type="submit"/>
        </form>
      </div>
    )
  }
}
export default {
  Form: reduxForm({
    form: 'Login'
  })(Login)
}

Я изменил код для простоты, поэтому используйте его только для справки.

@ adamtal3 это autoComplete="off"

@justinko Это не имеет значения. Если вы используете autoComplete response изменит его на autocomplete .
Как видите, я использовал строковое значение ( "off" ), а не значение js ( {'off'} ).

Если вы имеете в виду стандарты и согласованность React, я согласен, но не думаю, что это имеет большое значение.

Это мое решение.

Сначала я проверил, заполняется ли имя пользователя автоматически, когда компонент монтировался.
Если да, я бы обновил состояние поля пароля.
Как только hasValue станет истинным, плавающая метка будет обновлена.

componentDidMount() {
    setTimeout(() => {
        if(this.refs.username.getValue()) {
            this.refs.password.setState({...this.refs.password.state, hasValue: true})
        }
    }, 100)
}

Надеюсь это поможет. :)

Я нашел способ обновить плавающую метку, когда она автоматически заполнялась браузером.
`

setTimeout (function () {
var autofilled = document.querySelectorAll ('введите # пароль: -webkit-autofill');
if (автозаполнено) {
$ ("ввод [тип = пароль]"). parent (). addClass ("грязный");
}
}, 500);
`
это должно быть внутри вашего документа, готового в конце.
class is-dirty - это класс, который запускает вашу плавающую метку.

Я использую redux-form с react-ui. Решение для меня - разместить поддельный ввод сразу после необходимого ввода.

  <TextField
     {...password}
     type="password"
     placeholder={formatMessage(messages.loginPasswordPlaceholder)}
     disabled={submitting}
   />
   <Icon name="password" className={theme.icon}/>
   <input className={theme.hiddenInput} type="password" />

Мы надеемся, что React 16 исправит это: https://github.com/facebook/react/issues/7211#issuecomment -266774957

Та же проблема случилась со мной, когда я обновился с 0.17.1 до 0.18.1

Исправьте, что сработало для меня:

class FixedTextField extends Component {
    constructor() { 
       super()
       this.state = { value: '' } }
    }
    textfield = null

    componentDidMount() {
        requestAnimationFrame(() => {
            this.setState({ value: this.textfield.getInputNode().value })
        })
    }
    render() {
       return <TextField {...this.props} value={this.state.value} />
    }
}

Задний порт исправления только что был выпущен в React 15.6.0 . Кто-нибудь может проверить, решает ли он эту проблему?

[К сведению: сообщение «Я тоже» выше будет удалено - пожалуйста, используйте кнопки голосования, а не пульсируйте обсуждение.].

@mbrookes Не исправлено, как я тестировал.

@ Stupidism Подробности?

Прямо как тот, который вы разместили 2 года назад. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Какая версия Material-UI, какая версия React, какой браузер / версия?

  "name": "material-ui",
  "version": "0.18.3",

  "name": "react",
  "version": "15.6.0",



md5-f7a2844706b5476282e07a6c64e29edb



Google Chrome   59.0.3071.86 (Official Build) (64-bit)
OS  Linux
JavaScript  V8 5.9.211.31

: man_shrugging: В этом случае обходной путь @ whtang906 кажется лучшим вариантом на данный момент.

Для redux-формы

  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.refUsername = this.refUsername.bind(this);
    this.refPassword = this.refPassword.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
      }
    }, 100)
  }

  refUsername(component) {
    this.usernameRef = component.getRenderedComponent().refs.component;
  }
  refPassword(component) {
    this.passwordRef = component.getRenderedComponent().refs.component;
  }


            <Field
              name="username"
              withRef
              ref={this.refUsername}
              component={TextField}
            />

            <Field
              name="password"
              type="password"
              withRef
              ref={this.refPassword}
              component={TextField}
            />

Мое приложение работает немного медленнее, поэтому я добавил страховку

  componentDidMount() {
    let times = 0;
    const interval = setInterval(() => {
      times += 1;
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
        clearInterval(interval);
      } else if (times >= 10) {
        clearInterval(interval);
      }
    }, 100)
  }

Не удается получить значение из хромированного автоматически заполненного поля пароля
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

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

Ошибка все еще существует ...
[email protected]
[email protected]
Хром 60.0.3112.90

@artalar Просто попробуйте componentDidMount решение O (∩_∩) O

@Stupidism Спасибо за решение! Я пробовал все вышеперечисленное, и ни одно из них не помогло. Может потому, что большинству из них 1-2 года ...
Кстати, эта ошибка возникает только в Chrome, с Firefox все в порядке :)

@ Иван-Парушев Я думаю, это потому, что изменилось использование ref. Так решена твоя проблема или нет?

Здесь не решено, я заполняю значения из localStorage, если они существуют на componentDidMount, и такая же ошибка со всеми последними версиями.

Все еще ждем исправления ...

Я блокирую нить. Этому выпуску 2 года. Поскольку сейчас мы сосредоточены на ветке v1-beta. Если у кого-то есть пример воспроизведения, пожалуйста, откройте новый выпуск для ветки v1-beta.

Прошло уже 3 года. Эта проблема все еще существует с последними версиями пользовательского интерфейса react и material.

@tschaub Ха-ха, вроде ввода с фиксированной позицией в ios возникает целенаправленная проблема.

@tsmirnov Пора тебе застрять и исправить. 😜

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Ну вот:

Желтое выделение означает, что поля были заполнены автоматически. Как видите, пароль заполнен, но метка все еще на месте.

Я столкнулся с той же проблемой.

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Не могли бы вы объяснить, что это значит?

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Не могли бы вы объяснить, что это значит?

: -webkit-autofill выбирает автоматически заполняемые поля браузером. Поместите свою метку рядом с входом и выберите его с помощью селектора: -webkit-autofill. Если вам нужна дополнительная помощь, поделитесь своей текущей структурой html.

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Не могли бы вы объяснить, что это значит?

: -webkit-autofill выбирает автоматически заполняемые поля браузером. Поместите свою метку рядом с входом и выберите его с помощью селектора: -webkit-autofill. Если вам нужна дополнительная помощь, поделитесь своей текущей структурой html.

Конечно! Вот мой HTML Помогите, пожалуйста. благодаря
https://pastebin.com/yjJCip3r

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Не могли бы вы объяснить, что это значит?

: -webkit-autofill выбирает автоматически заполняемые поля браузером. Поместите свою метку рядом с входом и выберите его с помощью селектора: -webkit-autofill. Если вам нужна дополнительная помощь, поделитесь своей текущей структурой html.

Конечно! Вот мой HTML Помогите, пожалуйста. благодаря
https://pastebin.com/yjJCip3r

Ваши ярлыки идут сразу после ввода, поэтому вам не нужно ничего делать с html.
Просто выберите свои метки рядом с автозаполненными входами и установите для них свои активные стили меток, как показано ниже.

.mdl-textfield__input:-webkit-autofill + .mdl-textfield__label {
    // Active label styles here
    top: -20px; // Just an example
    transform: scale(0.75); // Just an example
}

@ Kishan3 Думаю, ты заблудился. MDL таков -> https://github.com/google/material-design-lite/issues/4827 😆

(Хотя, учитывая, что MDL мертв, Джим, возможно, вы все-таки пришли в нужное место!)

Блин! Это сбивает с толку с именами. : смеясь: @mbrookes Один вопрос: можем ли мы использовать UI материалов непосредственно в HTML со ссылками на CDN? Я так и не понял, что MDL мертв: cry:

@ kishan3 Вы можете , хотя, как говорится в документации, это означает, что клиент должен загрузить всю библиотеку, по крайней мере, в первый раз, пока она не будет кэширована, тогда как создание ее локально означает, что вы можете оптимизировать, какие компоненты включены.

Какое решение?

Эта проблема касается v0.x.

@oliviertassinari этот

В моем случае я использую раскрывающийся список, когда пользователь выбирает что-то в раскрывающемся списке, он устанавливает значение в состояние, TextField, связанный со значением, не перемещает метку.

Изменить : Как кажется, если я инициализирую значения TextField с помощью null то поплавок не будет перемещаться при передаче нового значения. Исправлено путем инициализации значений в состоянии пустой строкой вместо null

Если кто-то еще здесь, я просто установил эту опору InputLabelProps={{ shrink: true }} в текстовом поле, которое это произвело. Было лучшим решением для нашей команды.

@ tom-con, спасибо, мужик, у меня это отлично сработало

эта проблема все еще существует в 2019 году ...

Если кто-то еще здесь, я просто установил эту опору InputLabelProps={{ shrink: true }} в текстовом поле, которое это произвело. Было лучшим решением для нашей команды.
Я очень растерялся, а вы решили проблему! Лучшее рекомендуемое решение!

Это проблема v0.x (2015 г.), см. # 14427.

Для этой ошибки есть решение css

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

@ozturkcangokkaya Привет, это решение css отлично работает в Chrome. Но когда я проверяю свою форму в firefox, плавающая метка не работает. Ты хоть представляешь, почему webkit-autofill влияет на firefox?

Пожалуйста, смотрите # 14427 для v4.

Лучшее решение - прекратить использование Materialize и использовать Bootstrap или другую библиотеку, поскольку вам нужно придумать обходной путь, а Google, похоже, не заинтересован в устранении проблемы.

Если кто-то еще здесь, я просто установил эту опору InputLabelProps={{ shrink: true }} в текстовом поле, которое это произвело. Было лучшим решением для нашей команды.

Спасибо, я использую это: InputLabelProps={{ shrink: form.password }} , и он отлично работает.

<TextField
                id="loginPassword"
                label="Login Password"
                type="text"
                fullWidth
                value={form.password}
                onChange={(e) => setAttribute('form.password', e.target.value)}
                InputLabelProps={{ shrink: form.password }}
              />

Я решил свою проблему, установив lodash.merge в свой проект, после чего понял, что неправильно заполняю компонент текстового поля, потому что я думал, что поведение redux должно быть таким же, когда я использую вложенные объекты.

Как видите, я неправильно заполняю, когда смешиваю два вложенных объекта.

Я решил это с помощью библиотеки, и так оно и было.

Обратите внимание, что последняя версия Material-UI (v4.9.0) поддерживает его по умолчанию.