<div class="join">
    <button
            id="tag-btn-back"
            class="btn btn-warning btn-xs"
            hx-get="tasks"
            hx-trigger="click,keyup[key=='Escape'] from:#task-inp"
            hx-target="#list-of-tasks"
            hx-include="[id='filtering']"
    ><span><span class="shortcut_key">ESC</span></span></button>
    <label for="task-inp" class="hidden"></label>
    <input type="text" id="task-inp"
           class="input input-neutral input-xs join-item"
           placeholder="Enter Shortcut"
           hx-trigger="changes delay:2s"
           hx-target="#list-of-tasks"
           hx-include="[id='filtering']"
           hx-swap="innerHTML"
           autofocus
           onkeyup="if (this.value.length >= 2) { document.getElementById(this.value).click() }"
           onfocus="document.querySelectorAll('.task-shortcut-tag').forEach((e) => e.classList.remove('hidden'))"
           onblur="document.querySelectorAll('.task-shortcut-tag').forEach((e) => e.classList.add('hidden'));"
    />
</div>
