Fix how hover card is hidden

[matthew-white]

@lognaturel noticed that there are cases where mousing away from a link that shows a hover card causes an error to be logged in the browser console. She noticed this pattern:

Maybe if I hover over a form title and remove my cursor before the card shows?

Looking into it, I think the specific problem was if the user mouses away while the hover card requests are in progress. Doing so is supposed to cancel the requests, but it wasn't doing so. That led to the following sequence:

• Requests are sent.
• mouseleave leads to hoverCard.hide() being called, which sets hoverCard.anchor to null.
• Requests succeed.
• component.value is set in the HoverCards component.
• computePlacement() is called. But computePlacement() needs to know the position of hoverCard.anchor. When it tries to figure that out and sees that hoverCard.anchor is null, it throws.
• The fact that computePlacement() throws triggers the catch() in the promise chain, which calls resetResources(). That clears the response data, but it doesn't reset component.value or placement.value. It shouldn't have to reset those things, because the only thing that's supposed to trigger the catch() is a request failure. But the fact that component.value is set while the response data is not means that the component attempts to render without any of the data it requires. That leads to an error, and it's that (pretty ugly) error that @lognaturel was seeing in the console.

The more general problem here is that hoverCard.hide() is not triggering the hide() function in the HoverCards component. The hoverCard object is just responsible for managing simple state about the hover card, not sending requests. It's the hide() function that's supposed to cancel requests and reset component.value and placement.value. The fact that it wasn't called was the root cause of the issue.

What has been done to verify that this works as intended?

I wrote a test that succeeds now but failed without the code change. I also tried out the fix locally.

Before submitting this PR, please make sure you have:

• run npm run test and npm run lint and confirmed all checks still pass OR confirm CircleCI build passes
• verified that any code or assets from external sources are properly credited in comments or that everything is internally sourced

[matthew-white]

This is just a separate typo that I noticed.

[matthew-white]

This if meant that the hide() function was not called after hoverCard.state changed to false.

[matthew-white]

I also wanted to make a note of how hover cards were being hidden even though the hide() function wasn't being called. I mentioned that when hoverCard.hide() is called, that sets hoverCard.anchor to null. That alone was apparently enough to hide the popover, since we pass hoverCard.anchor to the Popover component via its target prop. In other words, the last hover card to be "hidden" was still present in the DOM, and its response data was still in memory. But because the target prop of the Popover component was null, the hover card wasn't being shown onscreen.

[matthew-white]

In case you're wondering how this test works (there's not much in the way of an assertion), our tests automatically fail if Vue logs a warning. Before the fix, Vue was logging a warning, but with the fix in place, it no longer logs a warning.