Material-ui: onloadwff.js:71 Échec de l'assertion : l'argument d'entrée n'est pas un élément HTMLInputElement

Créé le 12 mars 2019 · 12Commentaires · Source: mui-org/material-ui

[x] Ce n'est pas un problème de v0.x.
[x] J'ai recherché les problèmes de ce référentiel et je pense qu'il ne s'agit pas d'un doublon.

Comportement attendu 🤔

Il ne devrait y avoir aucune erreur de console lors de l'utilisation de TextField avec multiline={true}

Comportement actuel 😯

Lors du rendu d'un multiline TextField (dans un form ) et en appuyant sur la touche enter , ce qui suit est enregistré dans la console (à chaque pression sur la touche ):

onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement
  getFormProfile @ onloadwff.js:71
  setFieldValue @ onloadwff.js:71
  formKeydownListener @ onloadwff.js:71

onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined
    at e.setFieldValue (onloadwff.js:71)
    at HTMLFormElement.formKeydownListener (onloadwff.js:71)

Étapes pour reproduire 🕹

Accédez à https://material-ui.com/demos/text-fields/ et ouvrez la console de développement de Chrome (
Dans la section "TextField", cliquez sur n'importe quel contrôle multiligne et appuyez plusieurs fois sur la touche Entrée
Notez les exceptions enregistrées sur la console

J'ai pu reproduire ce bogue dans Chrome (à la fois Ubuntu 18 et WIndows 10).
Impossible de le reproduire dans Firefox (Ubuntu et Windows).

J'ai le même problème dans mon projet et j'ai découvert qu'il est également présent sur la page Web de Material-U.

Notez que le bogue ne s'affiche pas lorsque le champ de texte multiligne n'est pas enveloppé dans une balise de formulaire

Contexte 🔦

Pas beaucoup de contexte ici, j'ai juste rendu un champ de texte multiligne et découvert ces exceptions enregistrées dans la console.

Votre environnement 🌎

| Technologie | Versions |
|--------------|---------|
| Matériel-UI | v3.0.1 et v.3.9.2 |
| Réagir | 16.6.3 |
| Navigateur | Chrome, Firefox (les deux derniers) |
| TypeScript | non |
| etc. | - |

TextField external dependency

Source

npapagna

👍10

Commentaire le plus utile

Qui utilise LastPass ? Lève ta main! ( onloadwff.js )

oliviertassinari le 12 mars 2019

👍621 😄244 🎉99 👀77 ❤62 🚀45 😕26

Tous les 12 commentaires

Qui utilise LastPass ? Lève ta main! ( onloadwff.js )

oliviertassinari le 12 mars 2019

👍621 😄244 🎉99 👀77 ❤62 🚀45 😕26

@npapagna C'est une régression LastPass récente. Je doute fort que nous ayons pu avoir ce type de problème pendant si longtemps sans solution. Vous pouvez essayer avec un <textarea /> natif, même reproduction.

Capture d’écran 2019-03-12 à 23 52 33

oliviertassinari le 12 mars 2019

👍23 ❤6

@oliviertassinari a compris !

Merci à tous d'avoir pris le temps de regarder ça ! ??

npapagna le 13 mars 2019

Frais! Mais comment s'en débarrasser tout en gardant l'extension ?

avalanche1 le 29 août 2019

👍7

Frais! Mais comment s'en débarrasser tout en gardant l'extension ?

Il n'y a pas de correctif officiel pour cela, de toute façon une solution de contournement possible est la suivante :

Faites un clic droit sur l'extension LastPass
Sélectionnez « Ceci peut lire et modifier les données du site ».
Sélectionnez ensuite « lorsque vous cliquez sur l'extension ».

Rechargez la page, vous verrez que l'erreur disparaîtra.

Bien à vous.

expelliamus le 3 sept. 2019

👍38 ❤11

@sfanculatodinotte Merci !

A-Atrash le 9 sept. 2019

Frais! Mais comment s'en débarrasser tout en gardant l'extension ?

Salut!

Vous pouvez également exclure l'URL comme suit :

Allez sur LastPass et connectez-vous à votre compte
Allez dans la section Account parameters
Accédez à l'onglet URL Exclusions
Ajoutez une exclusion pour votre page telle que http://localhost

J'espère que cela t'aides!

Cordialement :détendu:

gdarchen le 16 oct. 2019

👍21

Qui utilise LastPass ? Lève ta main! (_onloadwff.js_)

:D, la meilleure réponse pour moi, merci beaucoup :)))

duongricky le 6 nov. 2019

Eh bien, c'est bien si vous êtes l'utilisateur, désactivez simplement lastpass, mais nous sommes tous des développeurs ici, n'est-ce pas ? Alors, que pouvons-nous faire pour empêcher que nos formulaires ne soient brisés pour nos utilisateurs qui utilisent LastPass (et qui ne trouveront jamais ce problème github) ?

Floriferous le 25 févr. 2020

👍7 👀1 🚀1 ❤1 🎉1 😄1

Pour être clair, cette erreur ne casse rien sur la page, c'est du bruit pour les développeurs. Si vous souhaitez le faire réparer, contactez le support LastPass, plus il y a de demandes, plus il est probable qu'ils le prioriseront.

oliviertassinari le 25 févr. 2020

❤2

Mon mauvais, j'ai eu une autre erreur étrange qui a causé un bug de mon entrée, cette erreur n'est en effet que du bruit.

Floriferous le 25 févr. 2020

<textarea class="form-control" id="messageBody"
            onkeypress={supressEnterPropagation}
            name="body"
            rows="18"
          ></textarea>

const supressEnterPropagation = (event) {
    if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
        event.stopPropagation()
     }
}

Vous avez l'idée. C'est le code sudo