primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.56k stars 4.61k forks source link

Autocomplete: deleting search term causes ExpressionChangedAfterItHasBeenCheckedError #14001

Closed ghost closed 1 year ago

ghost commented 1 year ago

Describe the bug

When typing anything to autocomplete, then deleting it, after deleting last character there is ExpressionChangedAfterItHasBeenCheckedError error throw.

it can be simulated in your example stackblitz anvironment

From the code it looks like the problem is that there are two different ways how "filled" property is set. One in "writeValue" is checking length of the value. which is in case of empty string set to "false" but in "inputValue = computed(() =>" , there is ObjectUtils.isNotEmpty(this.modelValue()) used, which is resolving empty string to "true"

Environment

your demo.

Reproducer

https://stackblitz.com/run?file=src%2Fapp%2Fdemo%2Fautocomplete-template-demo.ts

Angular version

16.2.0

PrimeNG version

16.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

all

Steps to reproduce the behavior

  1. go to and run https://stackblitz.com/run?file=src%2Fapp%2Fdemo%2Fautocomplete-template-demo.ts
  2. type random string to autcomplete
  3. delete the string by pressing backspace
  4. when the last character is remove, an error is thrown

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Expression location: AutocompleteTemplateDemo component. Find more at https://angular.io/errors/NG0100

Expected behavior

no error

cetincakiroglu commented 1 year ago

Hi,

With version 16.7.0, we have released the first part of the accessibility implementation for inputs that we have been working on for a long time. Based on the research we conducted during the implementation, we decided that many components needed changes in their structure and simplification, and these components were rewritten. Unfortunately, after extensive testing, there may be unexpected and unforeseen bugs that have emerged. We are grateful for your reports, and we are working to address them in the upcoming release!

cetincakiroglu commented 1 year ago

Hi,

I couldn't reproduce it on demos and your example doesn't start please provide a working example so I can see the error and identify it clearly.

ghost commented 1 year ago

Hi @cetincakiroglu , it is not my demo, it is demo from your AutoComplete documentation. It also did not worked for me in that split view where you see code and app in the same window. Try to open running app in new window once it is started (by the button on stackblitz), that way it worked for me.

Here is one of yours demo cloned: https://stackblitz.com/edit/q2xbwb?file=src%2Fapp%2Fdemo%2Fautocomplete-dropdown-demo.html

https://github.com/primefaces/primeng/assets/140504925/f636a8d4-5d7d-457a-b4ff-24132dd6ae68

cetincakiroglu commented 1 year ago

@martin-kasa-swissre

Thanks for the explanation, it's difficult to catch because doesn't happen all the time. We'll take a look at it