Can you try creating a global variable and make it true/false at the end of each functions.

In this we way you can handle whether the remove event is executed or not.

-Aravind.

Hii @Omar Abdelkefi,

There is some improvement required in your code

// Boolean flag to track event listener state 

let eventListenersAdded = false;

// References to event listener functions 

let handleCopyRef;

let handlePasteRef;

function addEventListenersToDropzone() {

  const dropzone = document.querySelector('.dropzone');

  if (!eventListenersAdded) {

    handleCopyRef = dropzone.addEventListener('keydown', handleCopy);

    handlePasteRef = dropzone.addEventListener('keydown', handlePaste);

     // Update flag to indicate event listeners are added 

    eventListenersAdded = true;

  }

}

function removeEventListenersFromDropzone() {

  const dropzone = document.querySelector('.dropzone');

 // Check if event listeners exist 

 if (eventListenersAdded) {

    dropzone.removeEventListener('keydown', handleCopyRef);

    dropzone.removeEventListener('keydown', handlePasteRef);

    // Update flag to indicate event listeners are removed 

    eventListenersAdded = false;

  }

}

let Test = $parameters.In1;

if (Test) {

  console.log("event added");

  addEventListenersToDropzone();

} else {

  console.log("event deleted");

  removeEventListenersFromDropzone();

}

This code ensures that the event listeners are only added once and removes them correctly when the flag changes. Additionally, it stores the references returned by addEventListener and uses them in removeEventListener to ensure accurate removal.

Hope this will solve your problem 

kind regards,

Sanjay Kushwah

Omar Abdelkefi ,

Since the question is something related to Javascript, Same you can check in ChatGpt will tell u the same  solution.

The only solution that i managed to obtain is the following ; 

Since we are working in a React environment, the most reliable way to handle dynamic event listeners is to use React's state and lifecycle methods (or hooks) to manage these event listeners.

Direct DOM manipulation as i was trying to implement won't work, therefore the best solution is to sets customs attributes on html elements, in order to check if events is already added, active or inactive.