Bold text in results can't be clicked in IE11

[colinrotherham]

This is an issue seen when using custom templates.

For an example see the Country and Territory autocomplete:
https://github.com/alphagov/govuk-country-and-territory-autocomplete

Each autocomplete result is shown in a list item:

<li class="autocomplete__option" role="option" tabindex="-1">
  <strong>Guinea-Bissau</strong> (The Republic of Guinea-Bissau)
</li>

The opts.templates.suggestion function adds <strong> (in pink below) around each result:

What's the bug?
I've found two bugs so far in Internet Explorer 11:

1. The <strong> areas marked in pink are unclickable
2. When mousing over each <strong> the first item flickers "active"

Perhaps the event isn't bubbling up to the <li> item correctly?

Video demonstration
https://youtu.be/AEiblEaCY-A

Looking at the tests this is a known but unlogged issue:
9ad4eec#diff-cfce3706f03f2afd25608bfdae2bee4eR120

if (isIE) {
  // FIXME: This feature works correctly on IE but testing it doesn't seem to work.
}

Thought I'd best get it logged if it helps with any design system considerations @NickColley.

[colinrotherham]

I've narrowed this down further and found two issues.

1. IE11 gets stuck in a mouseout loop, as seen below
   Workaround: Only fire mouseout on the outer list <ul> not on every <li>.

2. By design, the result list closes when blurring away from the <input>
   There's a mousedown event preventer to fix this but it doesn't work in IE11.

Workaround: Remove “mousedown” blocking. Replace with short delay on results list close state to allow click to reach each result first.

This requires a slightly different fix for iOS Safari as the content change (hover background colour) on mouseenter blocks the click() event due to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4

[colinrotherham]

Fixed by #310, but needs a new npm release.