feat: pfe-autocomplete - fire custom event when dropdown is shown

[kylebuch8]

Fixes #1045

pfe-autocomplete

Our analytics teams have requested a custom event to be fired when the pfe-autocomplete dropdown is shown to a user. They need this to help track the usage of the component. This pull request fires a pfe-autocomplete:options-shown event when the dropdown is shown to the user.

Related issue

• (pfe-autocomplete: fire custom event when dropdown is shown #1045) pfe-autocomplete: fire custom event when dropdown is shown

Preview

Link(s) to demo page(s) where this element can be viewed:

• Link

Testing instructions

1. Go to the demo page
2. Add the following code block in the developer tools console

const pfeAutocomplete = document.querySelector("pfe-autocomplete");
pfeAutocomplete.addEventListener("pfe-autocomplete:options-shown", e => console.log(e));

3. Enter the letter "i" into the first input field
4. Validate that the pfe-autocomplete:options-shown event fired

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 68 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

Check off items as they are completed. Feel free to delete items if they are not applicable.

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Repository compiles and tests pass.
• Changelog updated (not needed for documentation updates).
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[TylerMartin5]

Linux Green Turkey Michael