Input type "email" change to "text" when it is in :focus state

So there is this problem that my input with the type of "email" change to type of "text" when it is in a :focus state. Also it adds kl_ab.original_type="email" at the end of the input tag. This is problem for me since i want to have browser check if the address that user wrote is correct, so when type of email change to type of text writing first character makes it correct. To make a simpler picture i will post two screenshots from dev tools, one when email form is not focused, and second when it is in :focus state and code of course.

UNFOCUSED INPUT

INPUT WITH THE :focus STATE

HTML CODE

<form action="#" class="form">
     <div class="form__group">
       <input type="email" class="form__input" placeholder="Email address" id="email" required>
       <label for="email" class="form__label">Email address</label>
     </div>  
</form>

SCSS CODE

.form {

  &__group:not(:last-child) {
    margin-bottom: 2rem;
  }


  &__input {
    font-size: 1.5rem;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    background-color: rgba($color-white, .5);
    border: none;
    border-bottom: 3px solid transparent;
    width: 80%;
    display: block;
    transition: all .3;

   

    &:focus {
      outline: none;
      box-shadow: 0 1rem 2rem rgba($color-black, .1);
      border-bottom: 3px solid $color-primary;
    }

    &:focus:invalid {
      border-bottom: 3px solid $color-secondary-dark;
    }

    &::-webkit-input-placeholder {
      color: $color-grey-dark-2;
    }

  }

  &__label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: .7rem;
    display: block;
    transition: all .3s;
  }

  &__input:placeholder-shown + &__label {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4rem);
  }
}