bug: ion-input doesn't pass data attributes down to the actual input #30128
Description
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
The data attribute is emitted onto the ion-input not the input.
The reason I'm trying to do this is to stop lastpass from getting in the way:
add the 'data-lpignore'=true attribute for those items which you do not want LastPass to automatically fill.
I've tried throwing all of the tricks that people have suggested at it:
<form autocomplete="off"> <ion-input style="width: 100%" [(ngModel)]="task.text" (ionInput)="emitChange()" placeholder="Enter task" name="task" autocomplete="off" data-lpignore="true" role="note" ></ion-input> </form>But it still auto suggests.
When I inspect the markup though, I can see that most have been passed down, but not the data attribute:
<form _ngcontent-ng-c2514661556="" novalidate="" autocomplete="off" class="ng-pristine ng-valid ng-touched"> <ion-input _ngcontent-ng-c2514661556="" placeholder="Enter task" name="task" autocomplete="off" data-lpignore="true" style="width: 100%;" ng-reflect-placeholder="Enter task" ng-reflect-name="task" ng-reflect-autocomplete="off" ng-reflect-model="knepp - whats on calendar [IN " class="ng-pristine ng-valid sc-ion-input-ios-h sc-ion-input-ios-s ios has-value input-label-placement-start in-item ng-touched ion-pristine ion-valid ion-touched"> <!----> <label class="input-wrapper sc-ion-input-ios" for="ion-input-0"> <div class="label-text-wrapper label-text-wrapper-hidden sc-ion-input-ios sc-ion-input-ios-s"></div> <div class="native-wrapper sc-ion-input-ios sc-ion-input-ios-s"> <input class="native-input sc-ion-input-ios" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="task" placeholder="Enter task" spellcheck="false" type="text" role="note"> <div data-lastpass-icon-root="" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div> </div> </label> </ion-input> </form>Expected Behavior
Pass the data-* attributes down to the input
Steps to Reproduce
Use this snippet or the example stackblitz above and see that it doesn't have the data attribute:
<form autocomplete="off"> <ion-input name="task" autocomplete="off" data-lpignore="true" role="note" ></ion-input> </form>Code Reproduction URL
https://stackblitz.com/edit/e4zyrjjj-d3expxf3?file=src%2Fapp%2Fexample.component.html
Ionic Info
Ionic: Ionic CLI : 7.2.0 (/Users/matthewharris/.nvm/versions/node/v20.12.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.4.1 @angular-devkit/build-angular : 19.0.7 @angular-devkit/schematics : 19.0.7 @angular/cli : 19.0.7 @ionic/angular-toolkit : 12.1.1 Capacitor: Capacitor CLI : 6.2.0 @capacitor/android : not installed @capacitor/core : 6.2.0 @capacitor/ios : not installed Utility: cordova-res : not installed globally native-run : 2.0.1 System: NodeJS : v20.12.1 (/Users/matthewharris/.nvm/versions/node/v20.12.1/bin/node) npm : 10.9.1 OS : macOS Unknown Additional Information
No response