Autocomplete: ArrowDown key no longer opens overlay panel

[bojanb13579]

Describe the bug

On focused autocomplete component arrow down key no longer opens an overlay panel. Functionality was broken in version 16. Broken functionality can be tested on official primeng documentation site. When switching the version back to version 15, arrow down key opens an overlay.

Environment

Primeng verzion 16.9.1

Reproducer

No response

Angular version

16

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.2

Browser(s)

Chrome Version 120.0.6099.111 (Official Build) (64-bit)

Steps to reproduce the behavior

Focus autocomplete component and press arrow down key. Overlay doesn't show.

Expected behavior

Focus autocomplete component and press arrow down key. Overlay should show.

[RezaMakvandi]

same problem, I used Autocomplete component in all over my projects, and now by this update their functionality is broken. please fix this issue

[gianluca-moro]

We are currently facing the same issue and it's really annoying since the user can no longer fill out our forms using only the keyboard.

[cetincakiroglu]

We've removed this functionality during the accessibility implementation (after v16.8) and arrow down key no longer opens dropdown anymore. I am closing the issue and the PR.

[gianluca-moro]

@cetincakiroglu But why is it still supported in Dropdowns?

[gianluca-moro]

If anyone stumbles on this issue: You can re-add this behaviour using a simple Angular Directive:

import {Directive, Host, HostListener} from '@angular/core';
import {AutoComplete} from 'primeng/autocomplete';

@Directive({
  selector: 'p-autoComplete[autocompleteArrowDownOpenDropdown]',
})
export class AutocompleteArrowDownOpenDropdownDirective {
  constructor(@Host() private autocomplete: AutoComplete) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: any): void {
    if (!this.autocomplete) return;
    if (event.key === 'ArrowDown' && !this.autocomplete.overlayVisible && this.autocomplete.focused) {
      this.autocomplete.search(event, event.target.value, 'keydown');
      this.autocomplete.show();
    }
  }
}