[BUG] eventcatcher.js fails with events originating in core svg element (button/icon) about tiddlywiki5

[CodaCodr]

@saqimtiaz

Mulling this...

button svg{
    pointer-events: none;
}

Can't think of any reason to allow them issuing from svg... thoughts? I'm going with that anyway. Back soon.

[CodaCodr]

Same on Chrome latest (with slightly different error messages).

[CodaCodr]

This works fine:

\define sv-next-section-btn()
<$button actions=<<sv-next-section-btn-actions>> class="tc-btn-invisible sv-next-section-btn" 
  tooltip="View the next section in this chapter">►</$button>
\end

This fails (null parentNode)

\define sv-next-section-btn()
<$button actions=<<sv-next-section-btn-actions>> class="tc-btn-invisible sv-next-section-btn" 
  tooltip="View the next section in this chapter"><span style="font-size:2rem;">►</span></$button>
\end

This fails, too

\define sv-next-section-btn()
<$button actions=<<sv-next-section-btn-actions>> class="tc-btn-invisible sv-next-section-btn" 
  tooltip="View the next section in this chapter"><big>►</big></$button>
\end

[CodaCodr]

Same issue in 5.3.2 pre.

[pmario]

Hi, I cannot reproduce your problem.

It is important to exactly describe, how to reproduce the problem, otherwise we need to spend hours and hours trying to replicate the problem instead spending time to fix it.

I cannot promise to fix it, because I do not know the event catcher code very well, but without a (reliable) way to replicate the problem, I can do nothing.

[CodaCodr]

It is important to exactly describe, how to reproduce the problem

Of course. This isn't my first rodeo, Mario. Don't be teaching grandma to suck eggs. If I had such it would be up there with the stuff I took pains to post already.

I cannot promise to fix it, because I do not know the event catcher code very well

Which is why you probably shouldn't have bothered responding. This bug is infuriating enough for me, and no doubt will be for whoever chooses to investigate.

Here, as far as I can tell, is the issue...

Something causes a well known web/browser/js/DOM API to fail. event.target.parentNode (and it's "cousins") fail to surface an object and return null. The lines I posted come from eventcatcher.js in the core. The screenshot is the Firefox debugger showing the failure happening. The screenshot of the inspector window shows there is absolutely no reason that .parentNode should fail with null yet it can't even get a span parentNode, let alone the 4th generation grandparent it's trying to walk back to.

Sounds like a bug in Firefox? If so, Chrome has the ~same issue.

What's completely insane is, there are three buttons that have this issue out of a dozen or so in the same toolbar, all using <$button><svg> constructs.

Complete insane #2, .parentNode works. If it didn't, aircraft would be falling out of the sky.

It should be noted, the buttons work fine, they carry out their allotted actions perfectly (always have, always will, I guess). The bug is in the delegate, $eventcatcher, which sits 5 levels back, where I'm trying to capture clicks <-- whose actions work when called from elsewhere. These three don't work because node (parentNode) is null and the actions are never executed due to the RSOE.

A keen pair of eyes is needed, here. Someone that knows the TW code well, and understands the JavaScript/DOM event object and the interactions between them. For example (and I think this is doubtful, but I don't know...) does TW ever touch/construct event objects?

If this bug gains no traction (quite understandable if that happens) I may hack my own delegate in there with the triggering buttons intact and see what that might reveal. But I'm in no rush, my workaround (remove svg elements, replace with ◄ ►) is working fine.

Is this new code?

No. But there is a ton of "new-ish" code throughout the system, where I'm converting to 5.3x -- \define --> \procedure. This particular tiddler has, as yet, not been touched.

[saqimtiaz]

I have vague memories of having run into such issues with SVG elements in the past and that a potential workaround is to disable pointer events on the SVG elements, for example:

.sv-prev-section-btn svg{
    pointer-events: none;
}

[CodaCodr]

Vague memories are absoutely fine by me (They should be, I have TONS of them).

Thanks. I'll be back.

[CodaCodr]

button svg{
    pointer-events: none;
}

BINGO.

Thanks @saqimtiaz! 😎