Alpine morph ignoring the content of template tag

[bgrvn]

Hi!

I am using Alpine js + Morph + Alpine ajax.

While having this form on the page:

<form
    action="/dashboard/organizations"
    method="post"
    id="organizations-new"
    x-data="{ generatedSlug: '', insertManualSlug: false, ...form() }"
    x-target="organizations-new"
    x-target.away="_top"
    x-init='generatedSlug = ""'
>
    <fieldset class="form-group form-group--column form-group--gap">
        <label for="organizations-new_name" class="label">Name</label>

        <div class="form-field">
            <input
                id="organizations-new_name"
                type="text"
                name="organization[name]"
                label="Name"
                @input.debounce="validate"
            />
        </div>
    </fieldset>

    <template x-if="generatedSlug.length && !insertManualSlug">
        <div class="form-group slug-container">
            Organization slug will be <b></b>.
            <button type="button" @click="insertManualSlug = true">Change</button>
        </div>
    </template>

    <div class="form-group form-group--right">
        <button
            hidden=""
            x-ref="validateBtn"
            type="submit"
            formmethod="GET"
            formaction="/dashboard/organizations/new"
        >
            Validate
        </button>
        <button type="submit" class="btn btn--primary">Create organization</button>
    </div>
</form>

And on changing organization[name] input it submits the form and swaps it with:

<form
    action="/dashboard/organizations"
    method="post"
    id="organizations-new"
    x-data="{ generatedSlug: '', insertManualSlug: false, ...form() }"
    x-target="organizations-new"
    x-target.away="_top"
    x-init='generatedSlug = ""'
>
    <fieldset class="form-group form-group--column form-group--gap">
        <label for="organizations-new_name" class="label">Name</label>

        <div class="form-field">
            <input
                id="organizations-new_name"
                type="text"
                name="organization[name]"
                label="Name"
                value="value="asd""
                @input.debounce="validate"
            />
        </div>
    </fieldset>

    <template x-if="generatedSlug.length && !insertManualSlug">
        <div class="form-group slug-container">
            Organization slug will be <b data-phx-loc="29">asd-2</b>.
            <button type="button" @click="insertManualSlug = true">Change</button>
        </div>
    </template>

    <div class="form-group form-group--right">
        <button
            hidden=""
            x-ref="validateBtn"
            type="submit"
            formmethod="GET"
            formaction="/dashboard/organizations/new"
        >
            Validate
        </button>
        <button type="submit" class="btn btn--primary">Create organization</button>
    </div>
</form>

Everything swaps correctly instead of dom inside template tag, as a result I am having following:

<template x-if="generatedSlug.length && !insertManualSlug">
  <div data-phx-loc="28" class="form-group slug-container">
    Organization slug will be <b data-phx-loc="29"></b>.
    <button type="button" @click="insertManualSlug = true">Change</button>
  </div>
</template>

And page looks like this:

Here is how I am initializing Alpine.js:

import Alpine from "alpinejs";
import morph from "@alpinejs/morph";
import ajax from "@imacrayon/alpine-ajax";

import.meta.glob("./alpinejs/components/*.js", { eager: true });

window.Alpine = Alpine;

document.addEventListener("DOMContentLoaded", () => {
  Alpine.plugin(morph);
  Alpine.plugin(ajax.configure({ mergeStrategy: "morph" }));
  Alpine.start();
});

I believe something wrong with alpine-morph plugin, because when I am changing mergeStrategy to replace everything works as expected.

Could you please help with this?

Thank you in advance!

[bgrvn]

Also I've tried to do it manually in the console with Alpine.morph and changes where ignored