Material-ui: [TextField] El llenado automático de formularios no actualiza el texto de la etiqueta flotante en el campo de texto

Este es probablemente un buen lugar para comenzar ...

@illogikal ¿ podrías publicar un gif de eso?

Aqui tienes:

El resaltado amarillo indica que los campos se han completado automáticamente. Como puede ver, la contraseña está completa, pero la etiqueta sigue en su lugar.

Mm, eso es interesante. @mbrookes ¿Sabe si es para todos los tipos de entrada o solo para entradas de contraseña?

No estoy seguro: intenté cambiar el orden de la dirección y la contraseña, pero la función de autocompletar no se activó, ya sea para ingresar un usuario / contraseña conocidos o para guardar uno nuevo. Tendré que encontrar la mejor forma de probar otros campos.

Bien, planeo volver a refactorizar algunas de las cosas de TextField en un futuro cercano. Intentaré experimentar un poco también. Avísame si notas algo más.

¡Hola! Nos encontramos con este problema. ¿Hay algo que podamos hacer localmente para probar y experimentar con algunas posibles soluciones para esto? ¿O va a tener que esperar a una refactorización?

Tenemos el problema exacto con el campo de contraseña mencionado anteriormente. Además de eso, tenemos un problema similar con un TextField simple. Tenemos un conjunto de texto de sugerencia que desaparece si ingresa valores. Sin embargo, si establecemos un valor cuando la página se procesa (enlace profundo), el texto de sugerencia sigue siendo visible detrás del valor real. ¿Es probable que se trate del mismo problema o sería algo diferente?

¿Es probable que se trate del mismo problema o sería algo diferente?

Eso parece un problema diferente.

inspiración para una solución: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

ese código podría agregarse a onChange para actualizar un state.isAutofilled

Versión de Chrome 49.0.2623.87 (64 bits) OS X El Capitan

si se presiona cualquier tecla o se hace clic con el mouse, flota correctamente, pero la carga inicial está rota.

Exactamente el mismo problema:

¿Alguna idea, chicos?

Experimentando el mismo problema.

¿Hay alguna forma de deshabilitar el autocompletado que funcione con MUI?

@ kand617

Simplemente cree un par de campos y ocúltelos con " display: none ". Ejemplo:

Luego ponga sus campos reales debajo.

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

alguna solución para disparar el evento onChange?

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

@antoinerousseau ¿Esto se fusionará en master?

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

Este podría ser un problema similar (¿la misma causa raíz, una manifestación diferente?)

No veo los problemas de animación como se mencionó, pero la altura del contenedor TextField no tiene en cuenta el margen superior en la entrada. Esto da como resultado que TextField se extienda 14px por debajo del contenedor. Es una solución alternativa bastante sencilla, pero solo la veo con autocompletar:

Esto se solucionará pronto;)

buen @nathanmarks , gracias !!

¿Y encontraste un truco para actualizar la etiqueta flotante cuando Chrome se autocompleta sin hacer clic en la página también?

Este sigue siendo un tema bastante doloroso.

Intenté usar vanilla-autofill-event que simplemente no funcionó.

Estoy usando redux-form (como muchos otros) y encontré una solución desagradable (solo para mi formulario de inicio de sesión, no me importan otros formularios).
Lo probé solo en cromo, así que úselo en consideración.

Cuando agregué un nombre de usuario oculto y campos de contraseña, Chrome ignoró todo el formulario (a menos que los ocultara con display: none que a Chrome no le importara).

Así que utilicé 4 (: decepcionado:) campos adicionales. 2 para hacer que Chrome ignore mi formulario (autocomplete = off no funcionó) y 2 más en un formulario falso diferente para hacer el relleno de Chrome, que en componentDidMount agregué un tiempo de espera que copió los valores de los campos falsos a los reales usando redux evento de cambio de formulario:

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

Modifiqué el código para simplificarlo, así que úselo solo como referencia.

@ adamtal3 es autoComplete="off"

@justinko Realmente no importa. Si usa autoComplete react lo cambiará a autocomplete .
Puede ver que utilicé un valor de cadena ( "off" ) y no un valor js ( {'off'} ).

Si te refieres a los estándares y la consistencia de React, estoy de acuerdo, pero no creo que sea gran cosa.

Esta es mi solucion.

Primero, verifiqué si el nombre de usuario se rellena automáticamente cuando el componente se montó.
Si es así, actualizaría el estado del campo de contraseña.
Una vez que hasValue convierta en verdadero, la etiqueta flotante se actualizará.

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

Espero que esto ayude. :)

Encontré una manera de actualizar la etiqueta flotante cuando el navegador la llenó automáticamente.
'

setTimeout (function () {
var autofilled = document.querySelectorAll ('input # password: -webkit-autofill');
if (autocompletado) {
$ ("entrada [tipo = contraseña]"). parent (). addClass ("está-sucio");
}
}, 500);
'
esto debe estar dentro de su documento listo al final.
class "is-dirty" es la clase que activa su etiqueta flotante.

Estoy usando redux-form con react-ui. La solución para mí es colocar la entrada falsa justo después de la entrada necesaria.

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

Con suerte, React 16 debería solucionarlo: https://github.com/facebook/react/issues/7211#issuecomment -266774957

El mismo problema me sucedió cuando actualicé de 0.17.1 a 0.18.1

Arregle eso funcionó para mí:

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

El puerto trasero de la corrección acaba de ser lanzado en React 15.6.0 . ¿Alguien en condiciones de probar si resuelve este problema?

[Para su información: la publicación "yo también" anterior se eliminará; utilice los botones de votación en lugar de pulsar la discusión.].

@mbrookes No fijo como lo probé.

@Stupidism Detalles?

Como el que publicaste hace 2 años. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism ¿Qué versión de Material-UI, qué versión de React, qué navegador / versión?

  "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: En ese caso, la solución alternativa de @ whtang906 parece ser la mejor opción por ahora.

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

Mi aplicación es un poco lenta, así que agregué un 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)
  }

No se puede obtener valor del campo de contraseña autocompletado de Chrome
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

Por lo que he estado jugando con la rama v1-beta, el problema se ha solucionado en el camino. Podría ser la reescritura o una actualización de react. Estoy cerrando hasta que escuchemos más sobre eso. ¡Gracias por la discusión aquí!

El error aún existe ...
[email protected]
[email protected]
Cromo 60.0.3112.90

@artalar Prueba la solución componentDidMount O (∩_∩) O

@Stupidism ¡ Gracias por la solución! Probé todo lo anterior y ninguno funcionó. Quizás porque la mayoría tienen entre 1 y 2 años ...
Por cierto, este error solo ocurre en Chrome, Firefox está perfectamente bien :)

@ Ivan-Parushev Supongo que se debe a que se ha cambiado el uso de ref. Entonces, ¿tu problema está resuelto o no?

No resuelto aquí, estoy completando los valores de localStorage si existen en componentDidMount, y el mismo error con todas las últimas versiones.

Todavía esperando una solución ...

Estoy bloqueando el hilo. Este número tiene 2 años. Como ahora nos estamos enfocando en la rama v1-beta. Si alguien tiene un ejemplo de reproducción, abra una nueva edición para la rama v1-beta.

Ya han pasado 3 años. Este problema aún existe con las últimas versiones de react y material ui.

@tschaub Jaja, como si la entrada de posición fija de ios se enfocara en el problema.

@tsmirnov Es hora de que te

Hay una solución CSS para este error.

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

Aqui tienes:

El resaltado amarillo indica que los campos se han completado automáticamente. Como puede ver, la contraseña está completa, pero la etiqueta sigue en su lugar.

Estoy enfrentando el mismo problema.

Hay una solución CSS para este error.

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

¿Puede explicar qué significa esto?

Hay una solución CSS para este error.

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

¿Puede explicar qué significa esto?

: -webkit-autofill selecciona campos autocompletados por navegador. Coloque su etiqueta junto a la entrada y selecciónela con: -webkit-autofill selector. Si necesita más ayuda, comparta su estructura html actual.

Hay una solución CSS para este error.

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

¿Puede explicar qué significa esto?

: -webkit-autofill selecciona campos autocompletados por navegador. Coloque su etiqueta junto a la entrada y selecciónela con: -webkit-autofill selector. Si necesita más ayuda, comparta su estructura html actual.

¡Por supuesto! Aquí está mi HTML. Por favor ayuda. Gracias
https://pastebin.com/yjJCip3r

Hay una solución CSS para este error.

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

¿Puede explicar qué significa esto?

: -webkit-autofill selecciona campos autocompletados por navegador. Coloque su etiqueta junto a la entrada y selecciónela con: -webkit-autofill selector. Si necesita más ayuda, comparta su estructura html actual.

¡Por supuesto! Aquí está mi HTML. Por favor ayuda. Gracias
https://pastebin.com/yjJCip3r

Sus etiquetas vienen inmediatamente después de las entradas, por lo que no tiene que hacer nada con html.
Simplemente seleccione sus etiquetas junto a las entradas autocompletadas y establezca sus estilos de etiqueta activos como se muestra a continuación.

.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 creo que estás perdido. MDL es así -> https://github.com/google/material-design-lite/issues/4827 😆

(Aunque dado que MDL está muerto, Jim, ¡quizás hayas venido al lugar correcto después de todo!)

¡Ah, maldita sea! Es confuso con los nombres. : riendo: @mbrookes Sin embargo, una pregunta: ¿podemos usar material UI directamente en HTML con enlaces CDN? Nunca me di cuenta de que MDL está muerto: llora:

@ kishan3 Puede , aunque como dice en los documentos, esto significa que el cliente tiene que descargar la biblioteca completa, al menos la primera vez hasta que esté en caché, mientras que compilarla localmente significa que puede optimizar qué componentes están incluidos.

¿Cual es la solución?

Este problema se refiere a v0.x.

@oliviertassinari este todavía existe en v3.4.0.

En mi caso, estoy usando un menú desplegable, cuando el usuario selecciona algo en el menú desplegable, establece el valor en el estado, el TextField asociado al valor no hace flotar la etiqueta.

Editar : como parece, si inicio los valores de TextField con null , el flotador no se moverá cuando se pase un nuevo valor. Se corrigió inicializando los valores en el estado con una cadena vacía en lugar de null

Si alguien todavía está aquí, simplemente configuro este prop InputLabelProps={{ shrink: true }} en el TextField que esto afectó. Fue la mejor solución para nuestro equipo.

@ tom-con gracias hombre, funcionó perfectamente para mí

este problema todavía existe en 2019 ...

Si alguien todavía está aquí, simplemente configuro este prop InputLabelProps={{ shrink: true }} en el TextField que esto afectó. Fue la mejor solución para nuestro equipo.
¡Estaba realmente confundido y resolviste el problema! ¡La mejor solución recomendada!

Este es un problema v0.x (2015), consulte el número 14427.

Hay una solución CSS para este error.

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

@ozturkcangokkaya Hola, esta solución css funciona bien en Chrome. Pero cuando reviso mi formulario en Firefox, la etiqueta flotante no funciona. ¿Tiene alguna idea de por qué el llenado automático de webkit afecta a Firefox?

Consulte # 14427 para v4.

La mejor solución es dejar de usar Materialise y usar Bootstrap u otra biblioteca, ya que tiene que encontrar una solución alternativa y Google parece no tener interés en solucionar el problema.

Si alguien todavía está aquí, simplemente configuro este prop InputLabelProps={{ shrink: true }} en el TextField que esto afectó. Fue la mejor solución para nuestro equipo.

Gracias, estoy usando esto: InputLabelProps={{ shrink: form.password }} , y funciona perfectamente.

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

Resolví mi problema al instalar lodash.merge en mi proyecto y luego me di cuenta de que estaba llenando el componente de campo de texto incorrectamente porque pensé que el comportamiento de redux debería ser el mismo cuando uso objetos anidados.

Como puede ver, no estoy llenando correctamente cuando mezclo dos objetos anidados.

Resolví esto usando la biblioteca y así fue.

Tenga en cuenta que la última versión de Material-UI (v4.9.0) lo admite de forma predeterminada.