FormidableLabs / FormidableLabs/victory
VictoryGroup fails to pass shared events to children
- Dominant language
- TypeScript
- Stars
- 11.2k
- Forks
- 536
- PR merge metrics
- No merged PRs in 30d
Description
# Bug Reports
### Checklist
- [x] I have read through the [FAQ](https://formidable.com/open-source/victory/docs/faq) and [Guides](https://formidable.com/open-source/victory/guides/)
- [x] I am using the latest version of Victory
- [x] I've searched open issues to make sure I'm not opening a duplicate issue
### The Problem
VictoryGroup does not appear to pass shared events from its parent to its children. At least, events do not provide `style` props for children of `VictoryGroup`. I recall this worked at one point, but now it seems that events only work as expected with direct children?
### Reproduction
I created an interactive legend that uses events. When hovering over legend symbols and labels, we want to highlight the data associated with that particular legend item. That is, all other data (not associated with that legend item) is muted by applying an `opacity` style.
Events are located on `VictoryChart` because the legend is a direct child. However, the events fail to provide `style` properties for my `VictoryArea` and `VictoryScatter` components when they're placed inside `VictoryGroup`. Thus, I cannot apply the component's `style` properly to achieve the desired functionality.
**Example 1**
This code sandbox shows what is expected visually, but we're not able to use `VictoryGroup` here.
https://codesandbox.io/s/events-working-h67i5x?file=/src/App.js

**Example 2**
This code sandbox does NOT work with `VictoryGroup`. In this scenario, events don't provide component `style` properties.
https://codesandbox.io/s/events-not-working-d59wkm

Contributor guide
Assessment
This issue has not been assessed yet.