element.insertAdjacentHTML not adding html to DOM

Question

Below code:

export const showAddedFilesNames = ({
  baseIdentifiers: identifiers,
  inputFileElement,
  container: elementContainer,
  dragContainerDiv,
}) => {
  const paragraphID = identifiers.fileNameParagraphID.slice(1);
  let markup = ``;
  inputFileElement.files.forEach((file, index) => {
    markup += `<p data-index="${index}" id="${paragraphID}"><i class="fas fa-minus-circle mr-2"></i>${
      file.name
    }</p>`;
  });
  elementContainer.insertAdjacentHTML('beforeEnd', markup);
  dragContainerDiv.classList.remove('dragover');
  inputFileElement.value = null;
};

Is not adding markup to DOM by insertAdjacentHTML on ie11 (works perfectly on other browsers). When I change the first parameter in insertAdjacentHTML from 'beforeEnd' to 'afterEnd' somehow it works. Also when trying to add static html instead of markup variable then it also works.

The markup is a valid HTML code, I checked it in by console logging and here is an example of what is logged from markup variable:

<p data-index="0" id="filename"><i class="fas fa-minus-circle mr-2"></i>278893-dfd773dbb6347ccdd47b76138b291193.jpg</p>

If I will try to add below markup to markup variable just a static text, then it also works... this is very strange to me.

I'm using webpack together with babel to create bundle and polyfills to have it working on ie.

Answer 1

The problem was in this line of code: javascript inputFileElement.value = null; IE11 because of this line would fire twice the change event to input and the second time it would add an empty line to the place where my variable markup should be located. In chrome or firefox the event would fire only once. So I got rid of that line of code, and now everything works even in IE11.