Click Do Not Finish Due To Css Transition

Question

When I click on the search icon, the event fires as it should. But when the search window expands, the click does not start, instead the search window again returns to the small one.

Edit: see the claudios snippet for the behavior that I mean

Edit 2: .mouseDown() instead of .click() . . It seems that when I click on the search icon, the focus in the search window is lost, which causes it to return to its original size.This seems to happen before the mouseUp event, which means that the coordinates for the search icon no longer match the .click() event .

So, I activated the debugger, set the search box to focus and set breakpoints, and it works. Can I assume that my Css transitions prevent click action from completing? And if so, how do I get a click before css takes effect?

Here is all the relevant code:

 jQuery('.icon-wrapper').click(function(){ var searchQuery = jQuery('#searchBox').val(); if(searchQuery != ""){ alert("I got clicked!"); return; } }); 

 .expandable-search input[type=search]:focus { width: 80%; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input[type=search] { border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .expandable-search input[type=search] { padding-left: 10px; color: transparent; } .expandable-search input[type=search]:hover { background-color: #fff; } span.icon-wrapper:hover { cursor: pointer; } .expandable-search input[type=search]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; } .expandable-search input:-moz-placeholder { color: transparent; } .expandable-search input::-webkit-input-placeholder { color: transparent; } .expandable-search .icon-wrapper:after { content: url("http://ak-static.legacy.net/obituaries/images/obituary/obituaryportal/icon_search.png"); font-family:"Glyphicons Halflings"; position: absolute; left: 20px; top: 10px; color: #212121; font-size: 20px; left: 50px; top: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <li class="expandable-search vertical-center"> <input type="search" id="searchBox"> <span class="icon-wrapper"></span> </li> 

Answer 1

As I understand it, the problem is that the icon has two tasks

• expand search input first
• after that act as a submit button. Perhaps even check if the input to the search is relevant. If yes, execute a request, for example, a message via ajax, otherwise do not do anything or show a message that the user must fill out something.

Work with CSS :focus

One problem is that every time you click on the icon, the search input loses focus because your icon is not the content of this input. This way :focus , which you add using CSS, will be removed. One solution would be to work with pseudo-elements and simply place the icon in the contents :after or :before , but since you cannot use them in the inputs, you need to make a workaround to achieve what you want. Therefore, in your case, I believe that the only way is to simulate focus using JavaScript.

This can be done using the following code

HTML

 <div id="search"> <button id="search-button"> <i class="ion-ios-search"></i> </button> <input type="search" id="search-input" /> </div> 

CSS

 * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: #eee; } input { display: none; } #search { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; font-size: 0; } #search-button, #search-input { display: inline-block; background: white; border: none; outline: none; } #search-button { position: relative; width: 40px; height: 100%; border: none; cursor: pointer; } #search-button i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; margin: 0; } #search-input { height: 100%; width: 0; font-size: 20px; vertical-align: top; transition: 0.3s; padding: 0; } .clicked + #search-input { width: 200px; } 

JQuery

 var $searchButton = $("#search-button"); var $searchInput = $("#search-input"); $searchButton.click(function() { $searchInput.focus(); if ($searchInput.val() !== "") { alert("post"); } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") { $(this).addClass("clicked"); } else if ($(this).hasClass("clicked") && $searchInput.val() === "") { alert("fill"); } }); $(document).click(function(e){ if(!$("#search").has(e.target).length && $searchInput.val() === ""){ $searchButton.removeClass("clicked"); } }); 

 var $searchButton = $("#search-button"); var $searchInput = $("#search-input"); $searchButton.click(function() { $searchInput.focus(); if ($searchInput.val() !== "") { alert("post"); } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") { $(this).addClass("clicked"); } else if ($(this).hasClass("clicked") && $searchInput.val() === "") { alert("fill something in"); } }); $(document).click(function(e) { if (!$("#search").has(e.target).length && $searchInput.val() === "") { $searchButton.removeClass("clicked"); } }); 

 * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: #eee; } input { display: none; } #search { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; font-size: 0; } #search-button, #search-input { display: inline-block; background: white; border: none; outline: none; } #search-button { position: relative; width: 40px; height: 100%; border: none; cursor: pointer; } #search-button i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; margin: 0; } #search-input { height: 100%; width: 0; font-size: 20px; vertical-align: top; transition: 0.3s; padding: 0; } .clicked + #search-input { width: 200px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="search"> <button id="search-button"> <i class="ion-ios-search"></i> </button> <input type="search" id="search-input" /> </div> 

Answer 2

He works here. Maybe something is related to your css icon or something.

 $('.icon-wrapper').click(function() { var searchQuery = jQuery('#searchBox').val(); if (searchQuery != "") { alert(searchQuery); searchSubmit(searchQuery); return; } }); 

 .expandable-search input[type=search]:focus { width: 80%; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input[type=search] { border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .expandable-search input[type=search] { padding-left: 10px; color: #000; } .expandable-search input[type=search]:hover { background-color: #fff; } span.icon-wrapper:hover { cursor: pointer; } .expandable-search input[type=search]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; } .expandable-search input:-moz-placeholder { color: transparent; } .expandable-search input::-webkit-input-placeholder { color: transparent; } .icon-wrapper img { height: 30px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="expandable-search vertical-center"> <input type="search" id="searchBox"> <span class="icon-wrapper"> <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png"> </span> </li> </ul>