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

Bug: Using touch events triggers infinite console errors and removes click events #59

Open valkyriaivan opened 1 year ago

valkyriaivan commented 1 year ago

Describe the bug

I'm currently using the included SVGViewer, but when using touch events like in mobile/tablet, it triggers infinite console errors and renders unusable click events like Match details and onPartyClick.

To Reproduce

Use the SingleEliminationBracket (might happen in the other one, but haven't checked), use the included Match component and SVGViewer. Then configure chrome to use touch events.

Code

<SingleEliminationBracket
          options={{
            style: {
              boxHeight: 150,
            },
          }}
          onMatchClick={(m) => {
            console.log(m);
          }}
          matchComponent={Match}
          matches={matches}
          svgWrapper={({ children, ...props }) => (
            <SVGViewer
              width={width}
              height={height}
              SVGBackground={"rgba(0,0,0,0)"}
              background={"rgba(0,0,0,0)"}
              {...props}
            >
              {children}
            </SVGViewer>
          )}
        />

Priority

It seems to trigger errors but the scroll seems to work fine, but it seems to eliminate all click events like Match Details which can't be clicked.

Screenshots/Video

https://github.com/g-loot/react-tournament-brackets/assets/23335839/a7e9f321-de95-44d3-bae6-7ab08ac86146

Versions

Conclusion

It seems like a SVGViewer problem since I have checked and it can be configured in the original library. But I was wondering if someone has encountered this before and has a way to fix it only using the provided components or if there is plan to include it out of the box. Thanks!