Fix lost input focus after remote search

[Raidri]

Description

Fixed the bug #806.
Added to the input element the focus() function. It solves the problem that the focus get lost after a remote search.

Types of changes

• Chore (tooling change or documentation change)
• Refactor (non-breaking change which maintains existing functionality)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

[Xon]

I plan to investigate more as it looks like how the input field is being disabled while data is being loaded is just disruptive and probably needs a re-think

[ritwikBiswas007]

<select id="users"></select>

const select = document.getElementById('users');

const choice = new Choices(select, {
    searchChoices: false,
    searchResultLimit: 15,
    shouldSort: false,
    removeItemButton: false,
});

// Debounce function to limit how often we call API
function debounce(func, delay) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

// Debounced search handler
const handleSearch = debounce(async function (event) {
    const searchTerm = event.detail.value;

    if (!searchTerm) return;

    const input = document.querySelector('.choices__input');

    // Show loading text
    choice.clearChoices();
    choice.setChoices([{ value: '', label: 'Loading...', disabled: true }], 'value', 'label', false);

    try {
        const response = await fetch(`https://randomuser.me/api/?results=10`);
        const data = await response.json();

        const newChoices = data.results.map(user => ({
            value: user.login.uuid,
            label: `${user.name.first} ${user.name.last}`,
        }));

        choice.setChoices(newChoices, 'value', 'label', true);

        // Refocus the input
        setTimeout(() => {
            const newInput = document.querySelector('.choices__input');
            if (newInput) {
                newInput.focus();
                // Restore cursor position
                const val = newInput.value;
                newInput.value = '';
                newInput.value = val;
            }
        }, 30);
    } catch (error) {
        console.error('API error:', error);
        choice.setChoices([{ value: '', label: 'Error loading users', disabled: true }], 'value', 'label', false);
    }
}, 300);

// Add listener
select.addEventListener('search', handleSearch);

This code fixed the issue