TabSet - can't close tabs anymore when using .SVG as close tab icon

[maledoux]

Hi,
I was using smartGWT 6.1p until yesterday, when i upgraded to 12.0p (2019-04-30).

I have been using a TabSet with closable tabs by using setCanClose(true)on the Tab objects.
I was also changing the close icon of the TabSet with setCloseTabIcon ("close.svg").

In the newer 12.0p version, the tabs won't close anymore. So i removed the call to replace the close icon and use the default and it started working.

I changed the SVG file to a PNG file and the tab closes correctly.

So it looks like using an SVG file as a close tab icon is causing problems. Is SVG still supported in this case ?

Thank you,
Marc-Andre

[Isomorphic]

In SGWT/SC 12.0+, SVG images are by default embedded in <object> tags rather than <img> tags, to prevent suppression of certain SVG CSS styling. We write additional CSS onto the <object> tag to ensure that events in the SVG are handled by our Framework and not lost, but native browser behavior causes these events to be directed to the wrong DOM element - the parent of the <object> tag rather than the tag itself - which breaks some event handling such as in your case of icon clicks.

We're going to make a change to the Framework to resolve this, but in the meantime note that the property Canvas.useImageForSVG can be set true to revert to using <img> tags for SVG embedding. Note also that in SGWT/SC 12.1, we offer a different mode by default, where our Event Handler actively forwards the events from the SVG itself, rather than relying on CSS redirection, and doesn't suffer from this issue.

[maledoux]

Thank you for the explanation.

However, I just tried setting the useImageForSVG on the TabSet, the TabBar, the Layouts within the Tabs, and I still get the close icon rendered as <object>. Am I using it on the right object?

Thank you,
Marc-Andre

[Isomorphic]

The tabs ultimately become buttons, so you'd need to apply that setting to the buttons, but the required APIs are not currently exposed in SmartGWT.

Instead, if you want the old behavior app wide, you could just use Canvas.setDefaultProperties(). Pass it a template canvas that has the settings you want to apply as defaults for all canvii.

Canvas template = new Canvas();
template.setUseImageForSVG(true);
Canvas.setDefaultPropeties(template);

[maledoux]

Thank you, it worked :)

[Isomorphic]

This has now been fixed correctly, effective the nightly builds dated 2019-05-15, in the release (SGWT 12.0p/SC 12.0p) where "pointer-events:none" CSS is applied by default for SVG images, and in the latest (SGWT 12.1d/SC 12.1d), where it's applied if you set forwardSVGeventsToObject to false.