I am trying to add a custom modifier (derived from ChartModifierBase2D) to allow our users to navigate through datapoints using keyboard — left and right arrows.
But, the ZoomPanModifier prevents the keyboard events to reach this custom modifier.
Steps to reproduce the issue:
1. For example, use the following modifier that just listens to keyboard event and logs the event to console.
2. Add ZoomPanModifier along with the custom modifier.
3. Click on the chart to focus it and then press arrow keys. Nothing will be logged in the console.
4. Disable the ZoomPanModifier (either by setting its this.isEnabled = false or removing it entirely).
5. Click on the chart to focus it and then press arrow keys. You will see the keys logged in the console.
export class DataPointNavigatorModifier extends ChartModifierBase2D {
public readonly type: string;
constructor(options?: IChartModifierBaseOptions) {
console.log('DataPointNavigatorModifier::CTOR');
super(options);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.type = 'DataPointNavigatorModifier';
}
private handleKeyDown(ev: KeyboardEvent) {
console.log('DataPointNavigatorModifier::handleKeyDown', ev);
}
override onAttach() {
console.log('DataPointNavigatorModifier::onAttach');
this.parentSurface.domChartRoot.tabIndex = this.parentSurface.domChartRoot.tabIndex || 0;
this.parentSurface.domChartRoot.addEventListener('keydown', this.handleKeyDown);
}
override onDetach() {
console.log('DataPointNavigatorModifier::onDetach');
this.parentSurface.domChartRoot.removeEventListener('keydown', this.handleKeyDown);
super.onDetach();
}
}
I am open to other solutions that would allow users to navigate through datapoints using keyboard.
Best Regards,
Sachin Patel.
- sachin patel asked 2 weeks ago
- You must login to post comments
Hello! I couldn’t reproduce the issue. But here are some suggestions:
Make sure the root element is focused and has the proper tabIndex.
Try switching the order of adding the modifiers.
ZoomPanModifier calls “preventDefault” so this potentially may be the issue.
If the issue persists please send us a reproducible example via CodePen or CodeSandbox.
- Jim Risen answered 2 weeks ago
- You must login to post comments
Please login first to submit.