Material-ui: [TextField] O preenchimento automático do formulário não atualiza o texto do rótulo flutuante no campo de texto

Este é provavelmente um bom lugar para começar ...

@illogikal você poderia postar um gif disso?

Aqui está:

O destaque amarelo indica que os campos foram preenchidos automaticamente. Como você pode ver, a senha está preenchida, mas o rótulo ainda está no lugar.

Mm, isso é interessante. @mbrookes Você sabe se é para todos os tipos de entrada ou apenas entradas de senha?

Não tenho certeza - tentei trocar a ordem de endereço e senha, mas o preenchimento automático não disparou, seja para preencher um usuário / senha conhecido ou para salvar um novo. Terei que descobrir a melhor forma de testar outros campos.

Ok, pretendo revisitar a refatoração de algumas das coisas do TextField em um futuro próximo. Vou tentar experimentar um pouco também. Avise-me se notar mais alguma coisa.

Olá! Estamos enfrentando esse problema. Há algo que possamos fazer localmente para tentar e experimentar com algumas soluções possíveis para isso? Ou vai ter que esperar por um refatorador?

Temos exatamente o problema com o campo de senha listado acima. Além disso, temos um problema semelhante com um simples TextField . Temos um conjunto de texto de dica que desaparece se você digitar valores. No entanto, se definirmos um valor quando a página for renderizada (link direto), o texto de dica ainda estará visível atrás do valor real. É provável que seja o mesmo problema ou seria algo separado?

É provável que seja o mesmo problema ou seria algo separado?

Isso parece um problema diferente.

inspiração para uma correção: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

esse código pode ser adicionado a onChange para atualizar um state.isAutofilled

Versão do Chrome 49.0.2623.87 (64 bits) OS X El Capitan

se qualquer tecla for pressionada ou clicada com o mouse - ela flutua corretamente, mas a carga inicial é interrompida.

Exatamente o mesmo problema:

Alguma ideia, pessoal?

Enfrentando o mesmo problema.

Existe uma maneira de desativar o preenchimento automático que funciona com o MUI?

@ kand617

Basta criar alguns campos e ocultá-los com " display: none ". Exemplo:

Em seguida, coloque seus campos reais embaixo.

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

alguma solução para disparar o evento onChange?

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

@antoinerousseau Isso vai ser fundido no master?

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

Isso pode ser um problema semelhante (mesma causa raiz, manifestação diferente?)

Não estou vendo os problemas de animação mencionados, mas a altura do contêiner TextField não leva em consideração a margem superior na entrada. Isso resulta no TextField estendendo-se 14px abaixo do contêiner. É uma solução alternativa bastante simples, mas só estou vendo com o preenchimento automático:

Isso será corrigido em breve;)

nice @nathanmarks , obrigado !!

e você encontrou um hack para atualizar o rótulo flutuante quando o Chrome é preenchido automaticamente sem clicar na página também?

Este ainda é um problema muito doloroso.

Tentei usar vanilla-autofill-event que simplesmente não funcionou.

Estou usando redux-form (como muitos outros) e me deparei com uma solução alternativa (apenas para o meu formulário de login, não me importo com outros formulários).
Eu testei apenas no cromo, então use-o sob consideração.

Quando adicionei um nome de usuário e campos de senha ocultos, o chrome ignorou todo o formulário (a menos que os tenha ocultado com display: none, para o qual o chrome não se importou).

Usei 4 (: decepcionado :) campos extras. 2 para fazer o cromo ignorar meu formulário (autocomplete = off não funcionou) e mais 2 em um formulário falso diferente para fazer o cromo preencher, do que em componentDidMount adicionei um tempo limite que copiava os valores dos campos falsos para os reais usando redux - evento de mudança de forma:

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)
}

Modifiquei o código para simplificar, então use-o apenas como referência.

@ adamtal3 é autoComplete="off"

@justinko Realmente não importa. Se você usar autoComplete react irá alterá-lo para autocomplete .
Você pode ver que usei um valor de string ( "off" ) e não um valor js ( {'off'} ).

Se você está se referindo a padrões e consistência do React, então eu concordo, mas não acho que seja grande coisa.

Esta é a minha solução.

Primeiro, verifiquei se o nome de usuário foi preenchido automaticamente quando o componente foi montado.
Se sim, eu atualizaria o estado do campo de senha.
Assim que hasValue tornar verdadeiro, o rótulo flutuante será atualizado.

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

Espero que isto ajude. :)

Encontrei uma maneira de atualizar o rótulo flutuante quando ele foi preenchido automaticamente pelo navegador.
`

setTimeout (function () {
var autofilled = document.querySelectorAll ('input # password: -webkit-autofill');
if (preenchido automaticamente) {
$ ("input [type = password]"). parent (). addClass ("is-dirty");
}
}, 500);
`
isso deve estar dentro do seu documento pronto no final.
classe "is-dirty" é a classe que dispara seu rótulo flutuante.

Estou usando redux-form com react-ui. A solução para mim é colocar a entrada falsa logo após a entrada necessária.

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

Esperançosamente, deve ser corrigido pelo React 16: https://github.com/facebook/react/issues/7211#issuecomment -266774957

O mesmo problema aconteceu comigo quando atualizei de 0.17.1 para 0.18.1

Corrija que funcionou para mim:

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} />
    }
}

A porta traseira da correção acaba de ser lançada no React 15.6.0 . Alguém pode testar se isso resolve o problema?

[Para sua informação: a postagem "eu também" acima será excluída - use os botões de votação em vez de pulsar a discussão.].

@mbrookes Não corrigido conforme testei.

@Detalhes de estupidismo ?

Assim como o que você postou há 2 anos. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Qual versão do Material-UI, qual versão do React, qual navegador / versão?

  "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: Nesse caso, a solução alternativa de @ whtang906 parece ser a melhor opção por enquanto.

Para redux-form

  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}
            />

Meu aplicativo está um pouco lento, então adicionei um seguro

  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)
  }

Não é possível obter o valor do campo de senha preenchida automaticamente do Chrome
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

Até onde eu brincava com o branch v1-beta, o problema foi corrigido ao longo do caminho. Pode ser a reescrita ou uma atualização do react. Estou fechando até ouvirmos mais sobre isso. Obrigado pela discussão aqui!

O erro ainda existe ...
[email protected]
[email protected]
Chrome 60.0.3112.90

@artalar Experimente a solução componentDidMount O (∩_∩) O

@Estupidismo Obrigado pela solução! Eu tentei todos os itens acima e nenhum deles funcionou. Talvez porque a maioria deles tem 1-2 anos ...
A propósito, esse bug acontece apenas no Chrome, o Firefox está perfeitamente bem :)

@ Ivan-Parushev Acho que é porque o uso de ref foi alterado. O seu problema está resolvido ou não?

Não resolvido aqui, estou preenchendo os valores de localStorage se existirem em componentDidMount, e mesmo erro com todas as versões mais recentes.

Ainda esperando por uma correção ...

Estou fechando a discussão. Este problema tem 2 anos. Como agora estamos nos concentrando no ramo v1-beta. Se alguém tiver um exemplo de reprodução, abra um novo problema para o ramo v1-beta.

Já se passaram 3 anos. Esse problema ainda existe com as versões mais recentes da interface do usuário de reação e material.

@tschaub Haha, como a entrada de posição fixa do ios obtém o problema de foco.

@tsmirnov É hora de você ficar preso e consertar isso. 😜

Existe uma solução css para este bug

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

Aqui está:

O destaque amarelo indica que os campos foram preenchidos automaticamente. Como você pode ver, a senha está preenchida, mas o rótulo ainda está no lugar.

Eu estou enfrentando o mesmo problema.

Existe uma solução css para este bug

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

Você pode explicar o que isso significa?

Existe uma solução css para este bug

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

Você pode explicar o que isso significa?

: -webkit-autofill seleciona campos preenchidos automaticamente por navegador. Coloque seu rótulo ao lado da entrada e selecione-o com: -webkit-autofill selector. Se precisar de mais ajuda, compartilhe sua estrutura html atual.

Existe uma solução css para este bug

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

Você pode explicar o que isso significa?

: -webkit-autofill seleciona campos preenchidos automaticamente por navegador. Coloque seu rótulo ao lado da entrada e selecione-o com: -webkit-autofill selector. Se precisar de mais ajuda, compartilhe sua estrutura html atual.

Certo! Aqui está meu HTML. Por favor, ajude. obrigado
https://pastebin.com/yjJCip3r

Existe uma solução css para este bug

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

Você pode explicar o que isso significa?

: -webkit-autofill seleciona campos preenchidos automaticamente por navegador. Coloque seu rótulo ao lado da entrada e selecione-o com: -webkit-autofill selector. Se precisar de mais ajuda, compartilhe sua estrutura html atual.

Certo! Aqui está meu HTML. Por favor, ajude. obrigado
https://pastebin.com/yjJCip3r

Seus rótulos vêm logo após as entradas, então você não precisa fazer nada com html.
Basta selecionar seus rótulos ao lado das entradas preenchidas automaticamente e definir seus estilos de rótulos ativos, conforme mostrado abaixo.

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

Uh, @ kishan3 acho que você está perdido. MDL é assim -> https://github.com/google/material-design-lite/issues/4827 😆

(Embora, dado que MDL está morto, Jim, talvez você tenha vindo ao lugar certo afinal!)

Ah, droga! É confuso com nomes. : rindo: @mbrookes Uma pergunta: podemos usar a IU de material diretamente em HTMLs com links CDN? Eu nunca percebi que MDL está morto: choro:

@ kishan3 Você pode , embora, como diz na documentação, isso signifique que o cliente tem que baixar a biblioteca inteira, pelo menos a primeira vez até que seja armazenada em cache, ao passo que construí-la localmente significa que você pode otimizar quais componentes estão incluídos.

Qual é a solução?

Este problema diz respeito à v0.x.

@oliviertassinari este ainda existe na v3.4.0.

No meu caso, estou usando um menu suspenso, quando o usuário seleciona algo no menu suspenso, ele define o valor para o estado, o TextField associado ao valor não flutua o rótulo.

Edit : ao que parece, se eu iniciar os valores de TextField com null , o float não se moverá quando o novo valor for passado. Corrigido ao inicializar os valores no estado com string vazia em vez de null

Se alguém ainda estiver aqui, acabei de definir esta proposta InputLabelProps={{ shrink: true }} no TextField que isso afetou. Foi a melhor solução para nossa equipe.

@ tom-con obrigado cara, funcionou perfeitamente para mim

esse problema ainda existe em 2019 ...

Se alguém ainda estiver aqui, acabei de definir esta proposta InputLabelProps={{ shrink: true }} no TextField que isso afetou. Foi a melhor solução para nossa equipe.
Fiquei muito confuso e você resolveu o problema! Melhor solução recomendada!

Este é um problema v0.x (2015), consulte # 14427.

Existe uma solução css para este bug

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

@ozturkcangokkaya Olá, esta solução css funciona bem no Chrome. Mas quando eu verifico meu formulário no firefox, o rótulo flutuante não está funcionando. Você tem alguma ideia de por que o autofill do webkit afeta o firefox?

Por favor, veja # 14427 para v4.

A melhor solução é parar de usar o Materialize e usar o Bootstrap ou outra biblioteca, visto que você precisa encontrar uma solução alternativa e o Google parece não ter interesse em corrigir o problema.

Se alguém ainda estiver aqui, acabei de definir esta proposta InputLabelProps={{ shrink: true }} no TextField que isso afetou. Foi a melhor solução para nossa equipe.

Obrigado, estou usando este: InputLabelProps={{ shrink: form.password }} e funciona perfeitamente.

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

Resolvi meu problema ao instalar o lodash.merge em meu projeto, então percebi que estava preenchendo o componente do campo de texto incorretamente porque pensei que o redux deveria se comportar da mesma forma quando utilizo objetos aninhados.

Como você pode ver, não estou preenchendo corretamente quando misturo dois objetos aninhados.

Resolvi isso usando a biblioteca e assim foi.

Observe que a versão mais recente do Material-UI (v4.9.0) oferece suporte por padrão.