bug: ion-input doesn't pass data attributes down to the actual input

[rtpHarry]

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