ActionColumn onClick not working when using svg + path

[ghulamghousdev]

Forum post

Hi, I'm using the scheduler pro version 5.6.7.

I have action column and I'm using the onClick handler and renderer function.

I tested on the grouping demo and I modified the settings action to return a svg + path:

{
                renderer: () => {
                     return `<svg class="b-action-item b-tool" width="16" height="8" viewBox="0 -2 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.50008 2.5C2.03984 2.5 1.66675 2.8731 1.66675 3.33333V16.6667C1.66675 17.1269 2.03984 17.5 2.50008 17.5H5.00008C5.46032 17.5 5.83341 17.1269 5.83341 16.6667V3.33333C5.83341 2.8731 5.46032 2.5 5.00008 2.5H2.50008Z" fill="black" fill-opacity="1"/>
              <path d="M7.50008 3.33333C7.50008 2.8731 7.87318 2.5 8.33341 2.5H10.8334C11.2937 2.5 11.6667 2.8731 11.6667 3.33333V16.6667C11.6667 17.1269 11.2937 17.5 10.8334 17.5H8.33341C7.87318 17.5 7.50008 17.1269 7.50008 16.6667V3.33333Z" fill="black" fill-opacity="1"/>
              <path d="M13.3334 3.33333C13.3334 2.8731 13.7065 2.5 14.1667 2.5H16.6667C17.127 2.5 17.5001 2.8731 17.5001 3.33333V16.6667C17.5001 17.1269 17.127 17.5 16.6667 17.5H14.1667C13.7065 17.5 13.3334 17.1269 13.3334 16.6667V3.33333Z" fill="black" fill-opacity="1"/>
              </svg>
`
                },
                tooltip : 'Settings',
                onClick : ({ record }) => Toast.show('TODO: Show a cool settings dialog')
            },

Notice that If we click exactly on one of the bars, onClick is never triggered. But if you click between them or outside the icon (zoom the page to see this easier) the handler is called.

looks like the onClick only works for the parent, in this case if you click the element.

I do want to return the path on the renderer though, cause in the example I use fill="black" but on the app I want to use a css variable.

Is there a workaround for this?

Thanks!