g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
219 stars 69 forks source link

Unable to preventDefault inside passive event listener invocation. #40

Open erwinespl opened 2 years ago

erwinespl commented 2 years ago

in mobile issue , when user click on the input score this warning come out

" Unable to preventDefault inside passive event listener invocation. "

skala2301 commented 1 month ago

I have the same issue, isn't there any fix to this?

skala2301 commented 1 month ago

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

Screenshot from 2024-08-12 14-13-24