Hello ! I'm part of the same project, so I'll try to answer your questions. I'll also try to later make a minimal example that can be reproduced, but because of the tools we're using, it's quite complicated to reproduce it easily...

I'm not sure how you wired up [up-validate] and listeners to click and blur.

It's not exactly the case. We use an up.on event to listen to the click event for a specific class. At the end of this function, we use an up.render to update the content of the page.

After the render, we listen to the blur event (not an up-render, sorry for the confusion) to send an up.validate to recreate the page with the span. All inputs also have an up-validate attribute so the behavior is the same with or without a change in the input.

up.on(
  "click",
  ".click-to-edit-span",
  (event, element, data) => {
    const editTemplate = document.getElementById(
        `edit-${data.field_name}-template`
      );
    const editTemplateContent = editTemplate.innerHTML;
    up.render({
            target: element,
            content: editTemplateContent,
          })
          .then(() => {
            const inputElement = element.querySelector(
              `[name="${data.field_name}"]`
            );
            if (inputElement) {
              inputElement.focus();
              inputElement.addEventListener("blur", (event) => {
                const click_element = inputElement.closest(".click-to-edit-span");
                up.validate(event.originalTarget, {
                  target: click_element,
                  params: { blur_validation: true },
                });
              });
            }
          })
}

And a simple example of our html inside the form would be:

<div id="editable-last_name" class="click-to-edit-span" up-target="#editable-last_name"  up-data="{field_name:'last_name'}">
  <span name="last_name">DIALLO</span>
  <div id="edit-last_name-template" style="display: none;">
    # some elements like a label or warnings etc
    <input name="last_name", value="DIALLO"  type="text" up-validate="">
  </div>
</div>

There is probably an easier way to do this but I am new with unpoly and and I tend to complicate things...

To summarize:

• the blur event and the inputs both send an up-validate event (that we receive and manage in a post request)
• the click event just render the page
• the click and blur events work separately. But when one of the spans is transformed into an input and we click on another span, the first becomes a span again but the click event is simply not sent/detected

It's not immediately clear to my why you wouldn't see another click event. Try enabling the log (up.log.enable()) and see if the expected fragments are being updated.

I did wonder why the input has an [up-validate] attribute. The point of that attribute is to listen for a change, and then validate the closest form group. But you use your own event listeners to listen for a change (or blur in your case) and also call up.validate() yourself. Now both Unpoly and your own code will call up.validate() after a change. Also, since [up-validate] doesn't detect a form group, it may update the entire form.