Disable color on focus

Ionic Framework
1

On my sign in page I have the Username input and the Password input, I made it so that when someone is on the Username input and clicks on the Enter or Ok or Go button on the keyboard, yknow the one, it tabs onto the Password input field, but thing is, the password field get this horrible white color all over it, I’ve tried inspecting and searching for the property doing that and I can’t seem to find it, any tips?

In .ts I have this function that gets an element and sets focus to it

  moveFocus(nextElement) {
    nextElement.setFocus();
  }

In html this is what I’ve done

image
image.png1099×271 13.2 KB

This is what it looks like normally
image

This is what it looks like after I jump from the username to the password
image

2

Are you sure this isn’t being done by your browser and/or a plugin in your browser? Do you have LastPass or 1Password installed? It might be doing this stuff.

I suggest trying it in other browsers you have and/or turning off all extensions/add-ons.

3

Cheers
Nono this happens on my phone

4

I could provide the code if anyone wants to demo it

5

HTML

    <div>
        <h3>User</h3>
        <ion-item>
            <ion-input tabindex="1" (keyup.enter)="moveFocus(b)"></ion-input>
        </ion-item>
    </div>

    <div padding-top>
        <h3>Password</h3>
        <ion-item>
            <ion-input [type]="passwordType" tabindex="2" #b></ion-input>
        </ion-item>
    </div>

TS

  moveFocus(nextElement) {
    nextElement.setFocus();
  }
6

After trying all combinations I figured out that it happens because the ion input is inside an ion item

     <div>
          <h3>User</h3>
          <ion-input tabindex="1" (keyup.enter)="moveFocus(c)"></ion-input>
      </div>
  
      <div padding-top>
          <h3>Password</h3>
          <ion-input [type]="passwordType" tabindex="2" #c></ion-input>
      </div>

This no longer creates the white color, too bad since that ion-item was helping out but whatever

edit: i’m now using a div where the item was to get the underline like what ion item created for the input

from

            <div>
              <h3>Utilizador</h3>
              <ion-item mode="ios" no-padding>
                <ion-input type="text" placeholder="123456" [(ngModel)]="labelUtilizador" tabindex="1" (keyup.enter)="moveFocus(b)"></ion-input>
              </ion-item>
            </div>

to

            <div style="border-bottom: 0.5px solid white;">
              <h3 style="padding-left: 0px;">Utilizador</h3>
              <div class="ion-margin-bottom" style="display: flex; flex-direction: row">
                <ion-input no-padding type="text" placeholder="123456" [(ngModel)]="labelUtilizador" tabindex="1" (keyup.enter)="moveFocus(b)"></ion-input>
              </div>
            </div>