fix: dynamically added filefields

[lukasvinclav]

No description provided.

[yardensachs]

This introduced a bug. I am debugging now.

[yardensachs]

@lukasvinclav There's an issue with the fileInputUpdatePath implementation that prevents it from working with file inputs that exist when the page initially loads.

Currently, the MutationObserver only watches for newly added elements (childList mutations) and attaches the change event handler to file inputs after they're dynamically added to the DOM. However, this means any file inputs that are part of the initial page HTML are missed completely.

Suggested Fix

We should modify the function to:

1. Immediately attach handlers to existing file inputs when the function is called
2. Keep the MutationObserver for handling dynamically added inputs

Here's how the code could be restructured:

const fileInputUpdatePath = () => {
  const handleFileInput = (input) => {
    input.addEventListener("change", (e) => {
      const parts = e.target.value.split("\\");
      const placeholder = input.parentNode.parentNode.parentNode.querySelector(
        "input[type=text]"
      );
      placeholder.setAttribute("value", parts[parts.length - 1]);
    });
  };

  // Handle existing inputs
  document.querySelectorAll("input[type=file]").forEach(handleFileInput);

  // Watch for new inputs
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === "childList") {
        document.querySelectorAll("input[type=file]").forEach(handleFileInput);
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
};

[lukasvinclav]

Please create a new issue with the description.

[yardensachs]

Cool:
#855 and #856