Material-ui: onloadwff.js: 71 Falha na declaração: o argumento de entrada não é um HTMLInputElement

Criado em 12 mar. 2019 · 12Comentários · Fonte: mui-org/material-ui

[x] Este não é um problema de v0.x.
[x] Pesquisei os problemas deste repositório e acredito que não seja uma duplicata.

Comportamento esperado 🤔

Não deve haver erros de console ao usar TextField com multiline={true}

Comportamento Atual 😯

Ao renderizar multiline TextField (dentro de form ) e pressionar a tecla enter , o seguinte é registrado no console (cada vez que a tecla é pressionada ):

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)

Passos para reproduzir 🕹

Acesse https://material-ui.com/demos/text-fields/ e abra o Dev Console do Chrome (
Na seção "TextField", clique em qualquer controle multilinha e pressione a tecla Enter algumas vezes
Observe as exceções registradas no console

Eu poderia reproduzir esse bug no Chrome (Ubuntu 18 e WIndows 10).
Não foi possível reproduzi-lo no Firefox (Ubuntu e Windows).

Estou com o mesmo problema no meu projeto e descobri que está presente também na página da Material-U na web.

Observe que o bug não aparece quando o campo de texto de várias linhas não está envolvido em uma tag de formulário

Contexto 🔦

Não há muito contexto aqui, apenas renderizou um campo de texto de várias linhas e descobri essas exceções registradas no console.

Seu ambiente 🌎

| Tech | Versão |
| -------------- | --------- |
| Material-UI | v3.0.1 e v.3.9.2 |
| React | 16.6.3 |
| Navegador | Chrome, Firefox (ambos os mais recentes) |
| TypeScript | não |
| etc. | - |

TextField external dependency

Fonte

npapagna

👍10

Comentários muito úteis

Quem está usando o LastPass? Levante sua mão! ( onloadwff.js )

oliviertassinari em 12 mar. 2019

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

Todos 12 comentários

Quem está usando o LastPass? Levante sua mão! ( onloadwff.js )

oliviertassinari em 12 mar. 2019

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

@npapagna É uma regressão recente do LastPass. Duvido muito que pudéssemos ter esse tipo de problema por tanto tempo sem solução. Você pode tentar com um <textarea /> nativo, a mesma reprodução.

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

oliviertassinari em 12 mar. 2019

👍23 ❤6

@oliviertassinari entendeu!

Obrigado a todos por dedicarem seu tempo para olhar isso! 👏

npapagna em 13 mar. 2019

Legal! Mas como se livrar dele, mantendo a extensão ao mesmo tempo?

avalanche1 em 29 ago. 2019

👍7

Legal! Mas como se livrar dele, mantendo a extensão ao mesmo tempo?

Não há uma correção oficial para isso; de qualquer forma, uma possível solução alternativa é a seguinte:

Clique com o botão direito na extensão LastPass
Selecione "Isso pode ler e alterar os dados do site".
Em seguida, selecione "Quando você clica na extensão".

Recarregue a página, você verá que o erro desaparecerá.

Atenciosamente.

expelliamus em 3 set. 2019

👍38 ❤11

@sfanculatodinotte Obrigado!

A-Atrash em 9 set. 2019

Legal! Mas como se livrar dele, mantendo a extensão ao mesmo tempo?

Olá!

Você também pode excluir o URL da seguinte forma:

Vá no LastPass e conecte-se à sua conta
Vá para a seção Account parameters
Navegue até a guia URL Exclusions
Adicione uma exclusão para sua página, como http://localhost

Espero que isto ajude!

Atenciosamente: relaxado:

gdarchen em 16 out. 2019

👍21

Quem está usando o LastPass? Levante sua mão! (_onloadwff.js_)

: D, a melhor resposta para mim, muito obrigado :)))

duongricky em 6 nov. 2019

Bem, é bom se você for o usuário, apenas desative a última passagem, mas somos todos desenvolvedores aqui, certo? Então, o que podemos fazer para evitar que nossos formulários sejam corrompidos para nossos usuários que usam o LastPass (e que nunca encontrarão esse problema no github)?

Floriferous em 25 fev. 2020

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

Para ser claro, esse erro não quebra nada na página, é um ruído para os desenvolvedores. Se você quiser consertá-lo, entre em contato com o suporte do LastPass, quanto mais solicitações, maior será a probabilidade de eles priorizarem.

oliviertassinari em 25 fev. 2020

❤2

Meu mal, eu tive outro erro estranho que causou o bug na minha entrada, esse erro é realmente apenas ruído.

Floriferous em 25 fev. 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()
     }
}

Você entendeu. É o código sudo