Quote from Alex Dovlatov on March 9, 2026, 13:06

Hello Daniel

Test next solution please - into file functions.php add next code:

add_action('admin_head', 'woobe_search_input_focus_styles');

function woobe_search_input_focus_styles() {
    // Only load on BEAR plugin pages
    $screen = get_current_screen();
    if (!$screen || strpos($screen->id, 'woobe') === false) {
        return;
    }
    ?>
    <style>
        /* Wrap input in relative container for X button positioning */
        .woobe-search-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .woobe-search-wrap input[name="woobe_filter_form_tools_value"] {
            width: 99% !important;
            padding-right: 28px !important;
            transition: width 0.3s ease;
        }

        /* X clear button - hidden by default */
        .woobe-search-clear {
            position: absolute;
            right: 6px;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            color: #999;
            display: none;
            background: none;
            border: none;
            padding: 0;
        }

        .woobe-search-clear:hover {
            color: #333;
        }

        /* Show X when wrap has focus-within */
        .tools_panel_filter-unit-wrap:focus-within .woobe-search-clear {
            display: block;
        }

        /* Hide sibling cols when input is focused */
        .tools_panel_filter-unit-wrap:focus-within .col-lg-2 {
            display: none;
        }

        .tools_panel_filter-unit-wrap:focus-within .col-lg-6 {
            width: 100%;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('input[name="woobe_filter_form_tools_value"]');
            const tableWrapper = document.getElementById('advanced-table_wrapper');

            if (!input)
                return;

            // Wrap input in relative container and inject X button
            const wrap = document.createElement('div');
            wrap.className = 'woobe-search-wrap';
            input.parentNode.insertBefore(wrap, input);
            wrap.appendChild(input);

            const clearBtn = document.createElement('button');
            clearBtn.className = 'woobe-search-clear';
            clearBtn.innerHTML = '&times;';
            clearBtn.title = 'Clear search';
            wrap.appendChild(clearBtn);

            // X button: clear input and return focus
            clearBtn.addEventListener('mousedown', function (e) {
                input.value = '';
                input.blur(); // manually trigger blur = lose focus = CSS resets
                input.dispatchEvent(new Event('input', {bubbles: true}));
            });

            if (!tableWrapper)
                return;

            // Hide/show table wrapper on focus/blur
            input.addEventListener('focus', function () {
                tableWrapper.style.display = 'none';
            });

            input.addEventListener('blur', function () {
                tableWrapper.style.display = '';
            });
        });
    </script>
    <?php
}

After some tests it could be added into next version  of the plugin

Quote from Alex Dovlatov on March 27, 2026, 18:13

Hello Daniel

Update is done and your suggestion is there, we improved suggested code