Как включить кнопку в событие onfocus

Question

Я пытаюсь создать кнопку поиска, при нажатии на которую будет отображаться поле поиска с кнопкой отправки. Если вы щелкнете за пределами поля поиска, он вернется к стадии «только кнопка». Проблема в том, что, нажав кнопку отправки, она вызовет событие onblur

<div class="header-search-wrap" id="defaultsearch">
    <div class="td-search-btns-wrap">
        <a id="td-header-search-button" href="#" role="button" onclick="document.getElementById('searchlong').style.display = 'block';document.getElementById('defaultsearch').style.display = 'none'; document.getElementById('SQQ').focus()" >
        <i class="td-icon-search"></i>
        </a>
    </div>
</div>

<div class="header-search-wrap" id="searchlong">
    <form id="searchmainz" action="/software/search/" class="sForms">
        <div class="searchwrap">
            <input type="text" class="SearchInputWrapper" id="SQQ" name="q" value="" onblur="document.getElementById('defaultsearch').style.display = 'block';document.getElementById('searchlong').style.display = 'none'" />
        </div>
        <input class="SearchInputSubmit" value="search" type="submit" />
    </form>
</div>

Используя этот код, кнопка и поле поиска работают без проблем. После того, как я щелкну на кнопке поиска, она переключится на поле поиска + кнопку отправки (и вернется, если щелкнуть вне поля поиска). Однако кнопка отправки не работает, нажатие на нее вызывает событие onblur.

Я пытался переместить onblur даже в id формы, но он больше не работает.