Edit History

Hi !

I just tested this code on my prestashop. But the focus is not triggered and the request is launched. I must have made a mistake ...

input.form-control.search-widget__input-right {
    width: 0;
    min-width: inherit;
    padding: 10px 10px 10px 20px;
    border: none;
    background: none;
    float: right;
    transition: width .4s ease-in-out;
    -webkit-transition: width .4s ease-in-out;
}

input.form-control.search-widget__input-right:focus {
    width: 100%;
    border: 1px solid #cfcfcf;
    border-radius: 40px;
    font-size: 14px;
    height: 34px;
    color: #535252;
    background: #fff;
}

and

<!-- Block search module TOP -->
<form method="get" action="{$search_controller_url}" class="search-widget" data-search-widget data-search-controller-url="{$search_controller_url}">
    <input type="hidden" name="controller" value="search">
    <div class="search-widget__group">
        <input class="form-control search-widget__input-right" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        <button type="submit" class="search-widget__btn btn btn-link" onmouseover="setFocus()">
            <i class="material-icons search">&#xE8B6;</i>
            <span class="d-none">{l s='Search' d='Shop.Theme.Catalog'}</span>
        </button>
    </div>
</form>
<!-- /Block search module TOP -->
<script>
function setFocus() 
{
	document.getElementById("input.form-control.search-widget__input-right").focus();

}
</script>

My search div is :

<div class="search-widget__group">
        <input class="form-control search-widget__input-right" type="text" name="s" value="" placeholder="Rechercher" aria-label="Rechercher" autocomplete="off">
        <button type="submit" class="search-widget__btn btn btn-link" onmouseover="setFocus()">
            <i class="material-icons search"></i>
            <span class="d-none">Rechercher</span>
        </button>
    </div>

Thanks!!