listeners from dnd-kit are interfering with the input:checkbox's onChange event

[kazi331]

listeners from dnd-kit are interfering with the input:checkbox's onChange event

When I work with input:checkbox onchange event dnd-kit's {...listeners} interfere with the onchange event. Listeners disables onchange event in the input (I checked for input:checkbox and input:radio) element. If I remove/disable/commnet-out the {...listeners} input:checkbox event works just fine. But I need both {...listeners} and onchange event as without {...listeners} I cannot implement drag and drop.

The code where I tried is given below:

<div
            {...attributes}
            {...listeners}
            ref={setNodeRef}
            style={style}
            className={styles.itemWrapper}
        >
            <div
                className={styles.item}>
                <img src={item.image} alt="Image title goes here..." />
                <input type="checkbox" id={item.id.toString()}
                    onChange={() => {
                        console.log('checked/unchecked') // doesn't print in console
                        handleSelection(item.id)
                    }}
                />
                <label htmlFor={item.id.toString()} ></label>
            </div>
        </div>

If I disable {...listeners} onchange event works fine but dragging does't work

<div
            {...attributes}
           // {...listeners} // disabled
            ref={setNodeRef}
            style={style}
            className={styles.itemWrapper}
        >
            <div
                className={styles.item}>
                <img src={item.image} alt="Image title goes here..." />
                <input type="checkbox" id={item.id.toString()}
                    onChange={() => {
                        console.log('checked/unchecked') // print in console 
                        handleSelection(item.id)
                    }}
                />
                <label htmlFor={item.id.toString()} ></label>
            </div>
        </div>

[teodosii]

@kazi331 Also facing this issue, removing the listeners doesn't trigger dragging anymore. Have you found any workaround?

[kazi331]

@kazi331 Also facing this issue, removing the listeners doesn't trigger dragging anymore. Have you found any workaround?

listeners are needed to makes dragging work. I didn't find any solution.

[FalconiZzare]

Take a container div with position relative, then put your checkbox input inside container with position absolute and zIndex of a higher value, then take another div inside container right below checkbox and set position to abosolute too with width height 100%. Apply attributes and listeners on the inner div with absolute position and apply ref={setNodeRef} to the container div

This solved my issue, but I believe there might be a better solution.

[mobiware]

@kazi331 I managed to solve this issue by adding onPointerDown={event => event.stopPropagation()} on the Checkbox's <input />