Component: Dropdown - If editable = true and filter = true and you start typing, it will search by default but not start editing.

[dumitru-tabara-dev]

Describe the bug

If you click on the dropdown and start typing, the characters that you're typing will be displayed in the filter input but not in the editable input, and I think it is not the right behaviour. It was not behaving like this in the past. Also, it is a little bit annoying.
The text that you type will be introduced in the filter(search) input, but not in the dropdown editable input.

If you want to edit(type a value by yourself, without selecting one from the list) you have to click once on the arrow and then click on the dropdown(to move the focus) while the dropdown is open.

And it was not doing the same a few versions ago. I think the focus should stay on the dropdown when you start typing but now be switched to the filter(search).

Environment

Angular 17.0.8 & PrimeNG 17.3.2

Reproducer

https://stackblitz.com/edit/unjmt9-j4rqnt?file=src%2Fapp%2Fdemo%2Fdropdown-editable-component.html

Angular version

17.0.8

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[psarno]

We are impacted by this also.

Prior behavior allowed for editing to take precedence, so when you started typing it would be put into the input.

Currently, the filter takes focus and whatever you type goes into the filter, and not the edit area. If you click away from the control, it is left with no value.

[jules-js]

any updates on this one? I'm facing the same issue.

[pyrobirb]

workaround:

    let orgKeyDown = Dropdown.prototype.onKeyDown
    Dropdown.prototype.onKeyDown = function(event, search) {

        if(this.editable)
            return

        return orgKeyDown.call(this, event, search)
    }

    let orgEditableVisible = Dropdown.prototype.onEditableInput
    Dropdown.prototype.onEditableInput = function(event) {
        let orgVisible = this.overlayVisible
        this.overlayVisible = true
        orgEditableVisible.call(this, event)
        this.overlayVisible = orgVisible
    }