Как реализовать функцию onfocus() с помощью события onclick() тега span

У меня есть одно поле типа ввода, которое является типом ввода, вдохновленным google, с анимацией метки, которая имеет событие onfocus, а в одном из полей ввода есть поле Password, в котором я должен применить функциональность eye-toggle с событием onclick. Делюсь скриншотом типа ввода.

Когда я пытаюсь реализовать функцию переключения для паролей, событие onclick не может сработать из-за события onfocus.

Вот код для переключения.

CSS и иконка.

    .form-row {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .col-3 {
         max-width: 485px;
        -webkit-box-flex: 0;
         flex: 0 0 485px;
    }
    
    .inputfield {
        margin-bottom: 24px;
        margin-right: 20px;
        position: relative;
    }
    
    .inputfield .form-label{
        position: absolute;
        top: 23px;
        left: 20px;
        cursor: text;
        transition: top 250ms ease-in-out, left 250ms ease-in-out, font-size 250ms ease-in-out
    }
    
    .inputfield input{
        margin: 8px 0;
    }
 
    .inputfield-control {
        width: 100%;
        height: 50px;
        border: 1.5px solid #C4C4C4;
        border-radius: 5px;
        outline: none;
        background: none;
        padding-left: 16px;
        position: relative;
    }
    
    .inputfield-control:focus {
        border: 1.5px solid #2464E4;
    }
 
    .inputfield-control:focus ~ .form-label {
        top: 0px;
        left: 20px;
        font-size:13px;
        font-weight: 400;
        color: #232323;
        background-color: #ffffff;
        z-index: 10;
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .inputfield-control:not(:placeholder-shown).inputfield-control:not(:focus)~.form-label {
        top: 0px;
        left: 20px;
        font-size:13px;
        font-weight: 400;
        color: #232323;
        background-color: #ffffff;
        z-index: 10;
        padding-left: 4px;
        padding-right: 4px;
    }
    
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"></script>

Из-за анимации в поле ввода событие переключения клика даже не срабатывает.

$(document).on('click', '.toggle-password', function() {
  $(this).toggleClass("icon ion-md-eye");
  var input = $("#Password");
  input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 inputfield">
  <input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
  <label class="form-label">New Password</label>
  <div class="input-group-append custom">
    <span toggle="#password-field" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
    <br>
  </div>
</div>

Я пытался выполнить другое событие щелчка вместо события щелчка, но все равно, любое из событий щелчка не работает с Animation.

.inputfield-control {
    width: 100%;
    height: 50px;
    border: 1.5px solid #C4C4C4;
    border-radius: 5px;
    outline: none;
    background: none;
    padding-left: 16px;
    position: relative;
    padding-right: 70px;
}

.input-group-append.custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    z-index: 1;
}

.show-password-icn {
    font-size: 22px !important;
    color: #767676;
}