I am showing a dropdown which is rendered on click of an icon. The same dropdown is also rendered on right click of another div as well. It takes x and y coordinates of the mouse click event to render the dropdown at the right position. This is the icon's code:
<Icon onClick={this.handleOnClick} onKeyDown={this.handleOnClick}/>
When I do keyboard navigation and press Enter on the icon, the render function for dropdown is called, but since the event doesn't have an X and Y coordinate so the dropdown is rendered on the top left of the page at (0, 0).
Is there a way I can somehow get the position of the button when I am doing keyboard navigation?
I got this working using :
document.activeElement.getBoundingClientRect();
On Key event, I invoked this method.This method gives an object which contains x and y coordinates along with the height, width and other such properties