4
respostas

Unable to preventDefault inside passive event listener invocation

Olá, alguém poderia me ajudar?

Estou enfrentando esses erros ao tentar mudar a posição do card no calendário:

O "Unable to preventDefault inside passive event listener invocation" aparece assim que clico no card. O card até se movimenta pelas quadros, mas a data no filtro continua a mesma.

Os dois locais que o preventDefault são nos componentes Filtro e Formulário:

Filtro:

import React, { useState } from 'react';
import style from './Filtro.module.scss';

const Filtro: React.FC<{ aoFiltroAplicado: (data: Date | null) => void }> = ({ aoFiltroAplicado }) => {

  const [data, setData] = useState('')

  const submeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
    evento.preventDefault()
    if (!data) {
      aoFiltroAplicado(null)
      return
    }
    aoFiltroAplicado(new Date(data))
  }

  return (<form className={style.Filtro} onSubmit={submeterForm}>
    <h3 className={style.titulo}>Filtrar por data</h3>
    <input 
      type="date" 
      name="data"
      className={style.input}
      onChange={evento => setData(evento.target.value)} 
      placeholder="Por data"
      value={data} />

    <button className={style.botao}>
      Filtrar
    </button>

  </form>)
}

export default Filtro

Formulário:

import React, { useState } from 'react'
import { useSetRecoilState } from 'recoil'

import { IEvento } from '../../interfaces/IEvento'
import { listaDeEventosState } from '../../state/atom'
import { obterId } from '../../util'
import style from './Formulario.module.scss'

const Formulario: React.FC = () => {
  const setListaDeEventos = useSetRecoilState<IEvento[]>(listaDeEventosState)

  const [descricao, setDescricao] = useState('')
  const [dataInicio, setDataInicio] = useState('')
  const [horaInicio, setHoraInicio] = useState('')
  const [dataFim, setDataFim] = useState('')
  const [horaFim, setHoraFim] = useState('')

  const montarData = (data: string, hora: string) => {
    const dataString = data.slice(0, 10)
    return new Date(`${dataString}T${hora}`)
  }

  const submeterForm = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const evento = {
      id: obterId(),
      descricao,
      inicio: montarData(dataInicio, horaInicio),
      fim: montarData(dataFim, horaFim),
      completo: false,
    }
    setListaDeEventos((listaAntiga) => [...listaAntiga, evento])
    setDescricao('')
    setDataInicio('')
    setHoraInicio('')
    setDataFim('')
    setHoraFim('')
  }
  return (
    <form className={style.Formulario} onSubmit={submeterForm}>
      <h3 className={style.titulo}>Novo evento</h3>

      <label>Descrição</label>
      <input
        type="text"
        name="descricao"
        id="descricao"
        className={style.input}
        onChange={(evento) => setDescricao(evento.target.value)}
        placeholder="Descrição"
        value={descricao}
        autoComplete="off"
        required
      />

      <label>Data de início</label>
      <div className={style.inputContainer}>
        <input
          type="date"
          name="dataInicio"
          className={style.input}
          onChange={(evento) => setDataInicio(evento.target.value)}
          value={dataInicio}
          required
        />
        <input
          type="time"
          name="horaInicio"
          className={style.input}
          onChange={(evento) => setHoraInicio(evento.target.value)}
          value={horaInicio}
          required
        />
      </div>

      <label>Data de término</label>
      <div className={style.inputContainer}>
        <input
          type="date"
          name="dataFim"
          className={style.input}
          onChange={(evento) => setDataFim(evento.target.value)}
          value={dataFim}
          required
        />
        <input
          type="time"
          name="horaFim"
          className={style.input}
          onChange={(evento) => setHoraFim(evento.target.value)}
          value={horaFim}
          required
        />
      </div>

      <button className={style.botao}>Salvar</button>
    </form>
  )
}

export default Formulario
4 respostas

Salve, Arnaldo!

Consegue subir o projeto para um repositório no github?

Dai eu dou uma olhada pra entender o que se passa :)

Claro, Vinicios!

https://github.com/acn3to/event-tracker

Obrigado pela atenção.

Ele tá privado, Arnaldo!

Não consigo acessar :)

Consegue deixar ele público?

Desculpa, Vinicios. Não lembrava. Já está público.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software