Minimal javascript to make hiding work as expected.
document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('#search').forEach(p => {
+ let [input, button] = p.children;
+ button.onclick = e => {
+ if (input.value && input.offsetWidth > 50) {
+ return true; // bubble to submit
+ }
+ // make visible first
+ input.focus();
+ e.preventDefault();
+ return false;
+ };
+ });
+
document.querySelectorAll('.multiinput > input[id]').forEach(el => {
el.oninput = e => {
if (e.target.value == '') return;