Input da edição do item na lista não entra em foco ao clicar no botão de edição

Como visto na aula, ao clicar no botão de edição "editBtn" é habilitado o input da edição do item e ele entra em foco automaticamente, o que não acontece no meu código por alguma razão, e é preciso clicar no input invisível para ai sim fazer a edição. Outro problema que encontrei no código é o fato do usuário poder dar enter no input em vez de clicar no botão de salvar, o que gera um erro na função saveEdit.

Agradeço a atenção desde já e segue o código:

let itensList = []

const form = document.getElementById('form-itens');

form.addEventListener('submit', event => {
    event.preventDefault();
    saveItem();
    showItem();
    itensInput.focus();
})

const itensInput = document.getElementById('receber-item');

function saveItem() {
    const shoppingItem = itensInput.value;
    const checkDuplicate = itensList.some(element => element.item.toUpperCase() === shoppingItem.toUpperCase())
    if (checkDuplicate){
        alert('Este item já foi adicionado na lista. Tente outro item!')
    } else {
        itensList.push({item: shoppingItem, check: false,})
    }
    itensInput.value = "";
}

let editItem;

const ulItens = document.getElementById('lista-de-itens');
const ulComprados = document.getElementById('itens-comprados');

function showItem() {
    ulItens.innerHTML = '';
    ulComprados.innerHTML = '';

    itensList.forEach((element, i) => {
        if(element.check) {
            ulComprados.innerHTML += `
                <li class="item-compra is-flex is-justify-content-space-between" data-value="${i}">
                    <div>
                        <input type="checkbox" checked class="is-clickable" />  
                        <span class="itens-comprados is-size-5">${element.item}</span>
                    </div>
                    <div>
                        <i class="fa-solid fa-trash is-clickable deletar"></i>
                    </div>
                </li>
            `
        } else {
            ulItens.innerHTML += `
                <li class="item-compra is-flex is-justify-content-space-between" data-value="${i}">
                    <div>
                        <input type="checkbox" class="is-clickable" />
                        <input type="text" class="is-size-5" value="${element.item}" ${i != editItem ? 'disabled' : ''}></input>
                    </div>
                    <div>
                        ${ i == editItem ? '<button onclick="saveEdit()"><i class="fa-regular fa-floppy-disk is-clickable"></i></button>' : '<i class="fa-regular is-clickable fa-pen-to-square editar"></i>'}
                        <i class="fa-solid fa-trash is-clickable deletar"></i>
                    </div>
                </li>
            `
        }

    })

    const inputsCheck = document.querySelectorAll('input[type="checkbox"]');

    inputsCheck.forEach(i => {
        i.addEventListener("click", event => {
            const elementValue = event.target.parentElement.parentElement.getAttribute('data-value');
            itensList[elementValue].check = event.target.checked;
            showItem();
        })
    })

    const deleteObject = document.querySelectorAll(".deletar");

    deleteObject.forEach(i => {
        i.addEventListener("click", event => {
            const elementValue = event.target.parentElement.parentElement.getAttribute('data-value');
            itensList.splice(elementValue, 1);
            showItem();
        })
    })

    const editBtn = document.querySelectorAll(".editar");

    editBtn.forEach(i => {
        i.addEventListener('click', event => {
            editItem = event.target.parentElement.parentElement.getAttribute('data-value');
            showItem();
        })
    })
}

function saveEdit() {
    const editedItem = document.querySelector(`[data-value="${editItem}"] input[type="text"]`);
    console.log(itensList);
    itensList[editItem].item = editedItem.value;
    editItem = -1;
    showItem();
}