dataselected event is never raised for the slicer visual - powerbi-embedded

Question

I have a PBI report that I embed on our web app using the https://www.npmjs.com/package/powerbi-client-react package. In our report we have various visuals and we have registered for handling various events including data selection events for the visuals which works for all the visuals except the slicer visual for some reason.
My question is how I can get the data selected event to work for slicers or is there is a known existing gap on this?
I'm currently using: powerbi-client-react version 1.3.1 which is latest as of time of this writing and is built on top of the powerbi-client package. I also left a snipped of the events I registered for.
As a side note I've followed the events on https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/handle-events and didn't see any other events that made as much sense to use for slicers specifically.
const pbiEventHandlers = new Map([
['loaded', onPbiLoaded],
['rendered', onPbiRendered],
['pageChanged', onPbiPageChange],
['dataSelected', onPbiDataSelected],
['error', onPbiError]
]);

Answer 1

The slicer that is being selected does not have a data point thus, dataSelected event is not getting triggered.
However this is not true for all types of slicer.
Take example of a different slicer:
Slicer with dataSelected event handler
Here, when clicking on "East" dataSelected event is triggered as it does have a data point.
The work around which can be used for these types of slicer would be using visualClicked event with getSlicersStates.
// report.on will add an event listener.
report.on("visualClicked", async function () {
console.log("Visual clicked event triggred");
// Get pages
const pages = await report.getPages();
// Retrieve the page that contain the slicer. For the sample report it will be the active page
let pageWithSlicer = pages.filter(function (page) {
return page.isActive;
})[0];
// Get visuals present on the active page
const visuals = await pageWithSlicer.getVisuals();
// Retrieve the target visual.
let slicer = visuals.filter(function (visual) {
return visual.type === "slicer" && visual.name === "4d55baaa5eddde4cdf90";
})[0];
// Get the slicer state
const state = await slicer.getSlicerState();
console.log(state);
});
Output:
Output for code snippet