可扩展的搜索留下输入行错误

Question

我使用jQuery和css进行了可扩展的搜索。当我展开搜索然后将其关闭时，它会留下一个光输入线，当我滚动页面时就会消失。

不确定发生了什么。我正在使用materializecss.com

jsfidle：https://jsfiddle.net/Shank09/nv6vxeqa/4/

这是我扩展的时候：

这是我在扩张后关闭的时间：

滚动之后：

$(".searchicon").click(function(){
    	if($(".searchbox").hasClass("open")){
      	$(".searchbox").removeClass("open");
      }
      else{
      	$(".searchbox").addClass("open");
        $(".searchbox").focus();
      }
    });

    .searchbox {
      width: 0% !important;
    }
    .searchbox.open {
      width:45% !important;
      padding-left: 10px !important;
    }
    .searchicon {
      cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fund-search" type="search" class="searchbox" placeholder="Search">
    <i class="material-icons right searchicon" ng-click="toggleSearch()">search</i>