Material-ui: [TextField] Le remplissage automatique du formulaire ne met pas à jour le texte de l'étiquette flottante sur le champ de texte

C'est probablement un bon point de départ ...

@illogikal pourrais-tu poster de gif ça?

Voici:

La surbrillance jaune indique que les champs ont été remplis automatiquement. Comme vous pouvez le voir, le mot de passe est rempli, mais l'étiquette est toujours en place.

Mm, c'est intéressant. @mbrookes Savez-vous si c'est pour tous les types d'entrée ou uniquement pour les entrées de mot de passe?

Je ne sais pas - j'ai essayé de permuter l'ordre de l'adresse et du mot de passe, mais la saisie automatique n'a pas été déclenchée, soit pour remplir un utilisateur / mot de passe connu, soit pour en enregistrer un nouveau. Je vais devoir trouver la meilleure façon de tester d'autres champs.

D'accord, je prévois de revoir la refactorisation de certains éléments de TextField dans un proche avenir. Je vais essayer d'expérimenter un peu aussi. Faites-moi savoir si vous remarquez autre chose.

salut! Nous rencontrons ce problème. Y a-t-il quelque chose que nous pouvons faire localement pour essayer d'expérimenter avec des correctifs potentiels pour cela? Ou va-t-il devoir attendre un refactor?

Nous avons le problème exact avec le champ de mot de passe répertorié ci-dessus. En plus de cela, nous avons un problème similaire avec un simple TextField . Nous avons un ensemble de texte d'indication qui disparaît si vous saisissez des valeurs. Cependant, si nous définissons une valeur lorsque la page s'affiche (lien profond), le texte d'indication est toujours visible derrière la valeur réelle. Est-ce probablement le même problème ou est-ce que ce serait quelque chose de distinct?

Est-ce probablement le même problème ou est-ce que ce serait quelque chose de distinct?

Cela ressemble à un problème différent.

inspiration pour un correctif: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

ce code pourrait être ajouté à onChange pour mettre à jour un state.isAutofilled

Version Chrome 49.0.2623.87 (64 bits) OS X El Capitan

si une touche est enfoncée ou cliquée avec la souris - elle flotte correctement, mais la charge initiale est interrompue.

Exactement le même problème:

Une idée, les gars?

Vivre le même problème.

Existe-t-il un moyen de désactiver le remplissage automatique qui fonctionne avec MUI?

@ kand617

Créez simplement quelques champs et masquez-les avec " display: none ". Exemple:

Ensuite, mettez vos vrais champs en dessous.

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

une solution pour déclencher l'événement onChange?

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

@antoinerousseau Est-ce que cela va être fusionné dans master?

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

Cela pourrait être un problème similaire (même cause fondamentale, manifestation différente?)

Je ne vois pas les problèmes d'animation comme mentionné, mais la hauteur du conteneur TextField ne prend pas en compte la marge supérieure de l'entrée. Cela se traduit par l'extension TextField de 14 pixels sous le conteneur. C'est une solution de contournement assez simple, mais je ne le vois qu'avec la saisie semi-automatique:

Ce sera bientôt corrigé;)

gentil @nathanmarks , merci !!

et avez-vous trouvé un hack pour mettre à jour l'étiquette flottante lorsque le chrome se remplit automatiquement sans cliquer sur la page?

C'est toujours un problème assez douloureux.

J'ai essayé d'utiliser vanilla-autofill-event qui ne fonctionnait tout simplement pas.

J'utilise redux-form (comme beaucoup d'autres) et je suis venu avec une solution de contournement laide (juste pour mon formulaire de connexion, je ne me soucie pas des autres formulaires).
Je l'ai testé uniquement en chrome donc utilisez-le en considération.

Lorsque j'ai ajouté un nom d'utilisateur et des champs de mot de passe cachés, chrome a ignoré tout le formulaire (à moins de les masquer avec l'affichage: aucun dont Chrome ne se souciait pas).

J'ai donc utilisé 4 champs supplémentaires (: déçu:). 2 pour que chrome ignore mon formulaire (autocomplete = off ne fonctionnait pas) et 2 de plus dans un faux formulaire différent pour faire le remplissage de chrome, que dans componentDidMount j'ai ajouté un délai d'expiration qui copiait les valeurs des faux champs vers les vrais en utilisant redux -événement de changement de formulaire:

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

J'ai modifié le code pour plus de simplicité, alors utilisez-le juste pour référence.

@ adamtal3 c'est autoComplete="off"

@justinko Cela n'a pas vraiment d'importance. Si vous utilisez autoComplete react le changera en autocomplete .
Vous pouvez voir que j'ai utilisé une valeur de chaîne ( "off" ) et non une valeur js ( {'off'} ).

Si vous parlez des normes et de la cohérence de React, je suis d'accord, mais je ne pense pas que ce soit un gros problème.

C'est ma solution.

Tout d'abord, j'ai vérifié si le nom d'utilisateur est rempli automatiquement lors du montage du composant.
Si oui, je mettrais à jour l'état du champ de mot de passe.
Une fois que le hasValue devient vrai, le libellé flottant sera mis à jour.

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

J'espère que cela t'aides. :)

J'ai trouvé un moyen de mettre à jour l'étiquette flottante lorsqu'elle était remplie automatiquement par le navigateur.
»

setTimeout (fonction () {
var autofilled = document.querySelectorAll ('input # password: -webkit-autofill');
if (rempli automatiquement) {
$ ("input [type = password]"). parent (). addClass ("is-dirty");
}
}, 500);
»
cela devrait être dans votre document prêt à la fin.
class "is-dirty" est la classe qui déclenche votre étiquette flottante.

J'utilise redux-form avec react-ui. La solution pour moi est de placer la fausse entrée juste après l'entrée nécessaire.

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

Doit être, espérons-le, corrigé par React 16: https://github.com/facebook/react/issues/7211#issuecomment -266774957

Le même problème m'est arrivé lorsque j'ai mis à jour de 0.17.1 à 0.18.1

Correction qui a fonctionné pour moi:

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

Le port arrière du correctif vient d'être publié dans React 15.6.0 . Quelqu'un est-il en mesure de tester si cela résout ce problème?

[Pour info: le message "moi aussi" ci-dessus sera supprimé - veuillez utiliser les boutons de vote plutôt que de stimuler la discussion.]

@mbrookes Non corrigé comme je l'ai testé.

Détails @Stupidism ?

Tout comme celui que vous avez posté il y a 2 ans. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Quelle version de Material-UI, quelle version de React, quel navigateur / version?

  "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: Dans ce cas, la solution de contournement de @ whtang906 semble être la meilleure option pour le moment.

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

Mon application est un peu lente, j'ai donc ajouté une assurance

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

Impossible d'obtenir la valeur du champ de mot de passe de chrome rempli automatiquement
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

Dans la mesure où j'ai joué avec la branche v1-beta, le problème a été résolu en cours de route. Cela pourrait être la réécriture ou une mise à jour de react. Je ferme jusqu'à ce que nous en entendions plus. Merci pour la discussion ici!

L'erreur existe toujours ...
[email protected]
[email protected]
Chrome 60.0.3112.90

@artalar Essayez simplement la solution componentDidMount O (∩_∩) O

@Stupidism Merci pour la solution! J'ai essayé tout ce qui précède et aucun n'a fonctionné. Peut-être parce que la plupart d'entre eux ont 1 à 2 ans ...
Btw, ce bug ne se produit que dans Chrome, Firefox est parfaitement bien :)

@ Ivan-Parushev Je suppose que c'est parce que l'utilisation de ref a été modifiée. Alors, votre problème est-il résolu ou non?

Non résolu ici, je remplis les valeurs de localStorage si elles existent sur componentDidMount, et même erreur avec toutes les dernières versions.

J'attends toujours une solution ...

Je verrouille le fil. Ce numéro date de 2 ans. Comme nous nous concentrons maintenant sur la branche v1-beta. Si quelqu'un a un exemple de reproduction, veuillez ouvrir un nouveau numéro pour la branche v1-beta.

Cela fait 3 ans maintenant. Ce problème existe toujours avec les dernières versions de React et Material Ui.

@tschaub Haha, comme l'entrée ios à position fixe, obtient un problème ciblé.

@tsmirnov Il est temps pour vous de rester coincé et de le réparer. 😜

Il existe une solution css à ce bogue

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

Voici:

La surbrillance jaune indique que les champs ont été remplis automatiquement. Comme vous pouvez le voir, le mot de passe est rempli, mais l'étiquette est toujours en place.

Je suis confronté au même problème.

Il existe une solution css à ce bogue

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

Pouvez-vous expliquer ce que cela signifie?

Il existe une solution css à ce bogue

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

Pouvez-vous expliquer ce que cela signifie?

: -webkit-autofill sélectionne les champs remplis automatiquement par navigateur. Placez votre étiquette juste à côté de l'entrée et sélectionnez-la avec: -webkit-autofill selector. Si vous avez besoin de plus d'aide, veuillez partager votre structure html actuelle.

Il existe une solution css à ce bogue

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

Pouvez-vous expliquer ce que cela signifie?

: -webkit-autofill sélectionne les champs remplis automatiquement par navigateur. Placez votre étiquette juste à côté de l'entrée et sélectionnez-la avec: -webkit-autofill selector. Si vous avez besoin de plus d'aide, veuillez partager votre structure html actuelle.

Sûr! Voici mon HTML S'il vous plaît aider. Merci
https://pastebin.com/yjJCip3r

Il existe une solution css à ce bogue

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

Pouvez-vous expliquer ce que cela signifie?

: -webkit-autofill sélectionne les champs remplis automatiquement par navigateur. Placez votre étiquette juste à côté de l'entrée et sélectionnez-la avec: -webkit-autofill selector. Si vous avez besoin de plus d'aide, veuillez partager votre structure html actuelle.

Sûr! Voici mon HTML S'il vous plaît aider. Merci
https://pastebin.com/yjJCip3r

Vos étiquettes viennent juste après les entrées, vous n'avez donc rien à faire avec le HTML.
Sélectionnez simplement vos étiquettes juste à côté des entrées remplies automatiquement et définissez-leur vos styles d'étiquettes actifs comme indiqué ci-dessous.

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

Euh, @ kishan3 Je pense que tu es perdu. MDL est par ici -> https://github.com/google/material-design-lite/issues/4827 😆

(Même si MDL est mort Jim, peut-être que vous êtes au bon endroit après tout!)

Ah putain! C'est déroutant avec les noms. : rire: @mbrookes Une question cependant: pouvons-nous utiliser l'interface utilisateur matérielle directement dans les HTML avec des liens CDN? Je n'ai jamais réalisé que MDL était mort: pleurez:

@ kishan3 Vous pouvez , bien que comme indiqué dans la documentation, cela signifie que le client doit télécharger la bibliothèque entière, au moins la première fois jusqu'à ce qu'elle soit mise en cache, alors que la construire localement signifie que vous pouvez optimiser les composants inclus.

Quelle est la solution?

Ce problème concerne la v0.x.

@oliviertassinari cela existe toujours dans la v3.4.0.

Dans mon cas, j'utilise une liste déroulante, lorsque l'utilisateur sélectionne quelque chose dans la liste déroulante puis définit la valeur sur l'état, le TextField associé à la valeur ne fait pas flotter l'étiquette.

Edit : Comme il semble, si j'initialise les valeurs TextField avec null le flottant ne bougera pas lorsque la nouvelle valeur est passée. Correction en initialisant les valeurs dans l'état avec une chaîne vide au lieu de null

Si quelqu'un est encore là, je viens de définir cet accessoire InputLabelProps={{ shrink: true }} sur le TextField que cela a effectué. C'était la meilleure solution pour notre équipe.

@ tom-con merci mec, cela a parfaitement fonctionné pour moi

ce problème existe toujours en 2019 ...

Si quelqu'un est encore là, je viens de définir cet accessoire InputLabelProps={{ shrink: true }} sur le TextField que cela a effectué. C'était la meilleure solution pour notre équipe.
J'étais vraiment confus et vous avez résolu le problème! Meilleure solution recommandée!

Il s'agit d'un problème v0.x (2015), veuillez vous référer à # 14427.

Il existe une solution css à ce bogue

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

@ozturkcangokkaya Salut, cette solution css fonctionne très bien dans Chrome. Mais lorsque je vérifie mon formulaire dans Firefox, l'étiquette flottante ne fonctionne pas. Avez-vous une idée des raisons pour lesquelles le remplissage automatique de Webkit affecte Firefox?

S'il vous plaît voir # 14427 pour la v4.

La meilleure solution est d'arrêter d'utiliser Materialise et d'utiliser Bootstrap ou une autre bibliothèque, car vous devez trouver une solution de contournement et Google ne semble pas avoir intérêt à résoudre le problème.

Si quelqu'un est encore là, je viens de définir cet accessoire InputLabelProps={{ shrink: true }} sur le TextField que cela a effectué. C'était la meilleure solution pour notre équipe.

Merci, j'utilise ceci: InputLabelProps={{ shrink: form.password }} , et cela fonctionne parfaitement.

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

J'ai résolu mon problème en installant lodash.merge sur mon projet, puis j'ai réalisé que je remplissais incorrectement le composant de champ de texte, car je pensais que le redux se comportait de la même manière lorsque j'utilise des objets imbriqués.

Comme vous pouvez le voir, je ne remplis pas correctement lorsque je mélange deux objets imbriqués.

J'ai résolu cela en utilisant la bibliothèque et c'était le cas.

Notez que la dernière version de Material-UI (v4.9.0) le prend en charge par défaut.