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

[muuvmuuv]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• 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!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.