Dropdown: Unable to type in editable Dropdowns when filtering options onChange and current value is an option

[c-o-l-i-n]

Describe the bug

Given:

• A Dropdown is editable,
• The Dropdown has an array of options,
• The Dropdown has an onChange callback that filters these options based on the current value,

When:

• The user selects (or types) a value from the options,
• And tries to type more text into the Dropdown,

Then:

• The value of the Dropdown does not change.

For example:

The Dropdown options are ['apple', 'banana', 'orange']. The onChange handler filters the options based on the current dropdown value. The user types "apple" into the dropdown. They try to type " 2" to change the value to "apple 2", but the value remains "apple".

<p-dropdown
  #dropdown
  [options]="options"
  [editable]="true"
  (onChange)="onChange(dropdown, $event)"
/>

readonly options = ['apple', 'banana', 'orange'];

onChange(dropdown: Dropdown, event: DropdownChangeEvent): void {
  dropdown.options = this.options.filter((option) =>
    option
      .toLocaleLowerCase()
      .includes((event.value as string).toLocaleLowerCase())
  );
}

Environment

Stackblitz

Reproducer

https://stackblitz.com/edit/stackblitz-starters-vh2vfb?file=src%2Fmain.ts

Angular version

17.0.9

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

Whichever Node version Stackblitz uses

Browser(s)

No response

Steps to reproduce the behavior

1. Create a Dropdown with [editable]="true", an array of options, and an onChange handler that filters the options based on the Dropdown's current value.
2. Select an item from the options.
3. Try to add more text to the Dropdown.

Expected behavior

The user should be able to continue typing whatever they want into an editable Dropdown, even if the current value equals an option.

[mertsincan]

Interesting! I set a milestone. We'll examine in detail what causes this issue.