invoking click() Method on a checkbox, checks it...but also throws an error

[DevKame]

Part of my components template looks like this:

                        <div class="cb-container p-2 d-flex flex-wrap justify-content-center align-items-start">
                            <div
                                v-for="dev in all_developers"
                                :key="dev.id"
                                :value="dev.id"
                                @click="toggleCheckbox"
                                class="cb-label-holder m-2 p-2 d-flex justify-content-between align-items-center">
                                <input type="checkbox" :value="dev.id">
                                <label for="">{{ dev.name }}</label>
                            </div>
                        </div>

As you can see, there are divs .cb-label-holder that contain a checkbox and a corresponding label.
When clicked on, toggleCheckbox does this:

function toggleCheckbox(e: MouseEvent): void {
    console.clear();
    const wrapper = e.target as HTMLDivElement;
    const cb = wrapper.querySelector("input") as HTMLInputElement;
    console.dir(cb);
    cb.click();
}

Both the checkbox and label have pointer-events: none;
When clicked on the cb-label-holder, the containing checkbox gets checked, but this error is thrown:

"Cannot read properties of null (reading 'click')
TypeError: Cannot read properties of null (reading 'click')"

And i dont know why. What did i miss?

This is what i tried so far:

Defining cb in an onother way:
const cb = wrapper.querySelector("input") as HTMLElement;
const cb = <HTMLInputElement>wrapper.querySelector("input");
const cb = <HTMLElement>wrapper.querySelector("input");
const cb = <HTMLInputElement>wrapper.querySelector("input");

In all those cases, the actual selecting of the checkboxes happens, but the error occurs.

By the way, when using those versions, i get instantly another error saying:

"137:0 error Parsing error: Unexpected token. Did you mean {'}'} or }?"

I cannot do anything with that error. What does it mean?

[LinusBorg]

If you log the wrapper element to the console, you will find that it's not the div. The e.target refers to the element which fired the event (by being clicked), which likely was the input itself, which also explains why it was being checked by the click.

Sidenote: You say they have pointer-events: none, but maybe that's not actually working as you think it does / there is a mistake? hard to say as you left the specifics of this out of the example code.

So consequently, the wrapper.querySelector() returns null, because the wrapper element doesn't have another input as a child element.

What you actually need to use, I think, is e.currentTarget

The currentTarget read-only property of the Event interface identifies the element to which the event handler has been attached.

Also, I would argue your approach itself is usually considered an anti-pattern. A better way to solve this is to have the label wrap the input (or providing a proper for id), so clicking the label can select the checkbox (normal browser behaviour), and styling that. That way, you won't need to do listen for clicks at all.

                        <div class="cb-container p-2 d-flex flex-wrap justify-content-center align-items-start">
                            <div
                                v-for="dev in all_developers"
                                :key="dev.id"
                                :value="dev.id"
                                class="cb-label-holder m-2 p-2 d-flex justify-content-between align-items-center">
                                <label>
								<input type="checkbox" :value="dev.id"> {{ dev.name }}
                                </label>
                            </div>
                        </div>

Sidenote: This is not a Typescript error, it's a Javascript runtime error thrown in the browser - so your attempts to solve this by adding types in different ways would do nothing to solve this.