Show/hide clear icon inside input field not working properly

Question

I have created an input with an icon that clears the input text.

I initially have it set to display:none. When you focus on the input, the clear icon appears which is what I want, but when you click the clear icon it disappears and does not clear the input text, but then only reappears when you focus on the input again, which I dont want it to do this, as it should stay visible only until you click out of the input, then it should hide...

So the use case should be:

1. the clear icon should initially be set to hidden (in css or can be jQuery)
2. the clear icon should show when you focus on input
3. the clear icon should hide again, when you click out of the input

My script is not working properly, and I have tried a number of ways to work it out myself but nope, cant figure it out.

$("input")
  .focus(function() {
    $(this).attr("placeholder", "enter your email address...");
    $(".material-icons").show();
  })
  .blur(function() {
    $(".material-icons").hide();
    $(this).attr("placeholder", "input here");
    $(".clear-input").click(function() {
      $(this).prev().val("").focus();
    });
  });

html {
  box-sizing: border-box;
}

form {
  margin: 20vh;
}

.container {
  border: none;
  width: 248px;
  position: relative;
}

input {
  border: 1px solid pink;
  box-shadow: none;
  padding: 8px 100px 8px 5px;
  position: relative;
}

input:hover {
  border: 1px solid #222;
}

input:focus {
  border: 1px solid blue;
}

.material-icons {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: auto;
  font-size: 3px;
  cursor: pointer;
  color: #aaa;
  padding: 8px;
  display: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="container">
    <input class="type-here" type="text" placeholder="input here" />
    <i class="clear-input material-icons">clear</i>
  </div>
</form>

Answer 1

Just change click to mousedown because blur fires sooner than click event and deletes the click event and put click event in focus event.

$(document).ready(function(){
  $(".material-icons").hide();
  $("input")
  .focus(function() {
    $(this).attr("placeholder", "enter your email address...");
    $(".material-icons").show();
    $(".clear-input").mousedown(function(e) {
      e.preventDefault();
      $(this).prev().val("");
    });
  })
  .blur(function() {
    $(".material-icons").hide();
    $(this).attr("placeholder", "input here");
  });
});

html {
  box-sizing: border-box;
}

form {
  margin: 20vh;
}

.container {
  border: none;
  width: 248px;
  position: relative;
}

input {
  border: 1px solid pink;
  box-shadow: none;
  padding: 8px 100px 8px 5px;
  position: relative;
}

input:hover {
  border: 1px solid #222;
}

input:focus {
  border: 1px solid blue;
}

.material-icons {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: auto;
  font-size: 3px;
  cursor: pointer;
  color: #aaa;
  padding: 8px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="container">
    <input class="type-here" type="text" placeholder="input here" />
    <i class="clear-input material-icons">clear</i>
  </div>
</form>