fix(autocomplete): close dropdown on enter or tab key press

[justinludwig]

Fixes #707 with the following changes to the Autocomplete component:

1. Close after selection

   When an autocomplete value is selected via the autocomplete's
   setSelected() method, the autocomplete's v-model value will usually be
   updated, and the dropdown will usually scheduled to be closed on the
   next tick. However, updating the v-model value triggers the v-model
   watcher, which would then schedule the dropdown to be open again on the
   next tick.

   This change updates the v-model watcher to not do anything when the new
   value is the same as the currently selected value.

2. Close on blur

   If the autocomplete looses focus without a mouse click (eg because the
   user tabbed away from it), the dropdown would remain open.

   This change extends the standard onBlur handler to first close the
   dropdown (and then run the standard onBlur handling).

3. Remove menu from tab sequence

   Pressing the tab key when the autocomplete input was focused moved the
   focus to autocomplete menu.

   This change removes the autocomplete menu and all of its options from
   the tab sequence.

   This change also adds a menuTabindex prop to the Dropdown component
   (to enable the dropdown menu to be removed from the tab sequence).

4. Clear itemRefs on re-render

   Using the up & down keys to change the "hovered" state triggers a
   re-render of the autocomplete menu options -- but not of the
   autocomplete component itself. The autocomplete's own onBeforeUpdate
   handler is not called when this happens; and so using it to clear the
   itemRefs array resulted in the previous set of options not being
   removed.

   The main manifestation of this bug was that it was not possible to use
   the down key to access a selectable-footer option.

   This change clears the itemRefs array whenever the setItemRef()
   function is called for the first menu option; now the itemRefs array
   will be cleared both whenever the full autocomplete component is
   re-rendered, and whenever just the individual options are re-rendered.

5. Select head/foot exclusively of other options

   When the selectable-header (or selectable-footer prop) is true, it
   was possible to use the up & down keys to turn on the visual "hovered"
   state for both the header (or footer) option and another regular option
   at the same time.

   This change centralizes the logic of setting the hoveredOption,
   headerHovered, and footerHovered refs in the setHovered()
   function, ensuring that only one can be set at a time.

6. Apply ARIA combobox pattern

   The ARIA attributes used by the autocomplete menu and options
   represented the menu as if it were a standalone modal dialog.

   The change applies the Combobox Pattern from the ARIA Authoring
   Practices Guide to the autocomplete input, menu, and options -- which
   should allow assistive technologies to recognize the menu as a list of
   options available for the input, and to identify the currently "hovered"
   option.

   See https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ for details.

   This change also adds a menuId prop to the Dropdown component
   (to allow the combobox to reference the dropdown menu by id).

[netlify]

✅ Deploy Preview for oruga-documentation-preview ready!

Name	Link
🔨 Latest commit	7463a40
🔍 Latest deploy log	https://app.netlify.com/sites/oruga-documentation-preview/deploys/65bd85d83364b30007c36143
😎 Deploy Preview	https://deploy-preview-761--oruga-documentation-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: 21 lines in your changes are missing coverage. Please review.

Comparison is base (0a7f9b4) 54.62% compared to head (7463a40) 54.25%.

Files	Patch %	Lines
...-next/src/components/autocomplete/Autocomplete.vue	46.15%	21 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #761      +/-   ##
===========================================
- Coverage    54.62%   54.25%   -0.37%     
===========================================
  Files           32       32              
  Lines         1461     1480      +19     
  Branches       519      527       +8     
===========================================
+ Hits           798      803       +5     
- Misses         663      677      +14     

Flag	Coverage Δ
oruga-next	54.25% <48.78%> (-0.37%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mlmoravek]

@justinludwig Well done PR. Thanks a lot for your effort!!!