-
|
Hi. My custom directive wraps my specified elements with some divs. (I am experimenting with dropdowns and custom directives) I have radio buttons inside that element, and they use Any suggestion how to debug the root cause of this? Thank you. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
What is your custom directive? Gotta show code bro. Or link a sandbox from https://awesomealpine.com/play |
Beta Was this translation helpful? Give feedback.
-
|
ok, here is a minimal code sample. Just two files in the root directory that one can deploy with any server (such as python
document.addEventListener("alpine:init", () => {
Alpine.directive("form", (el) => {
let originalHtml = el.innerHTML;
let newHTML = `
<fieldset x-data>
${originalHtml}
</fieldset>
`;
el.innerHTML = newHTML;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Custom Alpine Directive</title>
<script src="/component.js" defer></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
defer
></script>
</head>
<body x-data="{ selected: 'email' }">
<h1>Hello</h1>
<form x-form>
<input
type="radio"
id="c1"
name="contact"
value="email"
x-model="selected"
/>
<label for="c1">Email</label>
<input
type="radio"
id="c2"
name="contact"
value="phone"
x-model="selected"
/>
<label for="c2">Phone</label>
</form>
<p x-text="selected"></p>
</body>
</html>And this is the console output: |
Beta Was this translation helpful? Give feedback.
-
|
Why are you doing that in the directive? Anyway, the root cause is that the original elements are being queued to initialize, but you remove them from the dom, and they then initialize while detached. Specifically solving it in your example would be Alpine.directive("form", (el) => {
const fieldset = document.createElement('fieldset');
fieldset.append(...el.children);
el.append(fieldset)
});so that you reuse the same elements. but why are you doing this kind of wrapping at all? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! I was primarily interested if I will like the componentisation style shown here https://devdojo.com/pines/docs/alpine-plugin . For the sake of completeness, what would you say is a main use case for the custom directives? |
Beta Was this translation helpful? Give feedback.
-
|
Oh wow, yeah thats just not very good for this very reason. You could use I use custom directives to group headless logic together. |
Beta Was this translation helpful? Give feedback.
Why are you doing that in the directive?
Anyway, the root cause is that the original elements are being queued to initialize, but you remove them from the dom, and they then initialize while detached.
Specifically solving it in your example would be
so that you reuse the same elements.
but why are you doing this kind of wrapping at all?