Why is my Modal lagging when opened for the first time

The lagging seems to appear only the first time it's opened

Codepen demo

Some reasons why I think this may be happening (but I've been told it's not the case):

Using one event listener on body and one event handler with multiple conditional statements

I've done this because i wont the modal to close even if the user clicks outside the modal object

open.addEventListener('click', (e) => {
    e.stopPropagation();
    change();

    document.body.addEventListener('click', takeInput);
});

function takeInput(e) {
    e.stopPropagation();
    let form = document.querySelector('.details_section');
    let formData = new FormData(form);
    if (e.target.closest('.shut') || (!e.target.closest('.modal'))) {
        form.reset();
        change();

    }

    else if (e.target.closest('.signin')) {
        if (form.checkValidity()) {
            console.log('true')
            change();
          form.reset();
        }
        else {
            console.log('false')
            form.reportValidity();

        }
    }
    else if (e.target.closest('.reset')) {
        form.reset();
    }

}