bug: ion-input debounce is not set with binding syntax on initial load

[muuvmuuv]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Setting debounce value on ion-input to debounce ionInput event has no effect, it triggers immediately.

Expected Behavior

Debounce

Steps to Reproduce

<ion-input
  [debounce]="1200"
  (ionInput)="onInput()"
  type="search"
></ion-input>

Code Reproduction URL

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

Ionic Info

See repl

Additional Information

No response

[sean-perkins]

Hello @muuvmuuv thanks for this issue.

This is due to a limitation in how/when angular assigns attributes and when our web components are able to detect the change. Currently the value is bound after the connectedCallback, but before the component is loaded.

As a workaround you can either not use binding syntax for debounce:

<ion-input
  debounce="1200"
  (ionInput)="onInput()"
  type="search"
></ion-input>

or you can update the debounce variable after the component has rendered, such as the ngAfterViewInit lifecycle.

I will log this a a bug, as we have implementation adjustments we can make internally to the component to better handle this scenario.

[muuvmuuv]

Good point, that works. I don't need to change the value, so this works for my case but I agree, some console warning would be great.

[sean-perkins]

Can you test with this dev-build and let me know if you experience any unwanted behaviors?

npm install @ionic/angular@8.0.1-dev.11713879639.102f51a0

Forked reproduction with dev-build: https://stackblitz.com/edit/stackblitz-starters-wcwcty?file=package.json

[muuvmuuv]

The dev-build works in our project, even with [debounce]="600". Great @sean-perkins!