Unable to preventDefault inside passive event listener invocation.
Opened this issue · 2 comments
erwinespl commented
in mobile issue , when user click on the input score this warning come out
" Unable to preventDefault inside passive event listener invocation. "
skala2301 commented
I have the same issue, isn't there any fix to this?
skala2301 commented
this is an example of my code
`function BracketPreview({ bracket, matches, fetchMatches }) {
const canvasRef = useRef(null)
const [canvasWidth, setCanvasWidth] = useState(500)
const [canvasHeight, setCanvasHeight] = useState(500)
const BowlerTheme = createTheme({
textColor: { main: '#000000', highlighted: '#bcbcbc', dark: '#bcbcbc' },
matchBackground: { wonColor: '#fff', lostColor: '#222' },
score: {
background: {
wonColor: '#222',
lostColor: '#222'
},
text: {
highlightedWonColor: '#fff',
highlightedLostColor: '#FB7E94'
},
},
border: {
color: '#222',
highlightedColor: '#222',
},
roundHeader: {
backgroundColor: '#8e2a2a',
fontColor: '#fff'
},
connectorColor: '#CED1F2',
connectorColorHighlight: '#da96c6',
svgBackground: '#2f3135',
})
useEffect(() => {
const updateCanvasSize = () => {
if (canvasRef.current) {
setCanvasWidth(canvasRef.current.offsetWidth - 20)
}
}
updateCanvasSize()
window.addEventListener('resize', updateCanvasSize)
return () => {
window.removeEventListener('resize', updateCanvasSize)
}
}, [])
const handleWinner = (party) =>{
console.log(party)
if(party.id){
axios.put(route('match.winner',{match_id: party.pivot.match_id, team_id: party.id}))
.then((res)=>{
console.log(res)
fetchMatches()
})
.catch()
}
}
return (
<>
<section className=" p-2 w-full grow">
<header>
<div>
</div>
<div>
</div>
<h2 className='text-lg font-bold'>{bracket.name} <Status bracket={bracket} className='text-sm font-light' /></h2>
<h3 className='text-base font-semibold'><FontAwesomeIcon icon={faTrophy} className='text-yellow-500' /> {bracket.tournament.title}</h3>
</header>
<div className='bg-gray-600 p-4 my-4' ref={canvasRef} >
{
matches.length > 0 ?
<SingleEliminationBracket
onPartyClick={handleWinner}
matches={matches}
matchComponent={Match}
theme={BowlerTheme}
options={{
style: {
roundHeader: {
backgroundColor: BowlerTheme.roundHeader.backgroundColor,
fontColor: BowlerTheme.roundHeader.fontColor,
},
connectorColor: BowlerTheme.connectorColor,
connectorColorHighlight: BowlerTheme.connectorColorHighlight,
},
}}
svgWrapper={({ children, ...props }) => (
<SVGViewer
width={canvasWidth}
height={500}
background={BowlerTheme.svgBackground}
SVGBackground={BowlerTheme.svgBackground}
viewBox={`0 0 ${canvasWidth} ${canvasHeight}`}
{...props}
>
{children}
</SVGViewer>
)}
/> : ''
}
</div>
</section>
</>
)
}`
in mobile i get this error when i click on the participant