0

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
RichaS
  • 219
  • 3
  • 14

1 Answers1

0

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

RichaS
  • 219
  • 3
  • 14
  • 1
    getBoundingClientRect returns coordinates relative to viewport, but I think you need coordinates relative to container element or whole page, I recommend to check difference between pageX/Y, screenX/Y, clientX/Y, offsetX/Y – Slavik Oct 21 '21 at 11:37