How to find x and y coordinates of a button while using keyboard navigation?

Question

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?

Answer 1

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