INP field report logs some element that is not even listening to any interactive events. What should I fix?

Question

I just received some data from Google Web Vitals JS Library. Any after refining the reports, I noticed that many huge INP penalty happened on an element that is not even clickable.

And the dom structure is like this:

The <b> itself is not a button, just wrapped inside the button. What should I fix? How can I debug this situation?

Answer 1

This is expected. The web-vitals.js library returns the element clicked (using event.target), even if that click bubbles up to a parent element to be handled.

The Event Timing API doesn't include a currentTarget to get the actual event handler but even if it did that would be less useful if the event handler is at a much higher level (e.g. the document).

Additionally, the reason it doesn't include currentTarget is that INP does not event require an explicit event handler. Just clicking on an non-interactive element (e.g. double clicking text to highlight it) can be the INP event, especially if the main thread is blocked and unable to handle that "no-op" click. Now most of those will be quick even if the main thread is busy as most modern browsers handle most of those sorts of browser-UI events (highlighting, scrolling...etc.) separate to the main thread, but they still count as INP-potential events.