Alpine.js version
v3.15.11 (didn't work in v3.15.8 either)
Browser and operating system
Chrome v147 on Windows 11, probably browser unrelated
Describe the issue you're experiencing
If an element has x-id=['name'] and on the same element x-data with magic $id('name') is used, the magic $id('name') creates a new context on the fly. Only after that happened, x-id is evaluated: Alpine sees that the id-name has been used before, counts it up and sets this as the new id-context. Further calls to $id('name') are working as expected.
Code snippets to reproduce the issue
Minimal reproduction on Codesandbox
<body x-data="{ outerScopeOnlyForXIdToWork: true }">
<h1>Example a</h1>
<div
x-id="['a']"
x-data="{ idFromData: $id('a'), anotherIdFromData: $id('a') }"
>
<p>
1st ID from magic inside x-data:
<strong x-text="idFromData"></strong> (expected: a-1)
</p>
<p>
2nd ID from magic inside x-data:
<strong x-text="anotherIdFromData"></strong> (expected: a-1)
</p>
<p>
1st ID from magic inside x-text:
<strong x-text="$id('a')"></strong> (expected: a-1)
</p>
<p>
2nd ID from magic inside x-text:
<strong x-text="$id('a')"></strong> (expected: a-1)
</p>
</div>
<h1>Example b</h1>
<div x-id="['b']">
<div x-data="{ idFromData: $id('b'), anotherIdFromData: $id('b') }">
<p>
ID from magic inside x-data:
<strong x-text="idFromData"></strong> (expected: b-1)
</p>
<p>
2nd ID from magic inside x-data:
<strong x-text="anotherIdFromData"></strong> (expected: b-1)
</p>
<p>
1st ID from magic inside x-text:
<strong x-text="$id('b')"></strong> (expected: b-1)
</p>
<p>
2nd ID from magic inside x-text:
<strong x-text="$id('b')"></strong> (expected: b-1)
</p>
</div>
</div>
</body>
Example a shows the bug, example b shows a workaround by using x-id on a parent element.
Screenshots/screen recordings
No response
How do you expect it to work?
I would expect, that the usage of $id inside x-data would respect the x-id context. It looks to me as if the x-id-context is established only after x-data has been evaluated.
Maybe it is a viable solution to not count up the found index inside packages/alpinejs/src/ids.js#L17 (via the call to findAndIncrementId(name))
Please confirm (incomplete submissions will not be addressed)
Alpine.js version
v3.15.11 (didn't work in v3.15.8 either)
Browser and operating system
Chrome v147 on Windows 11, probably browser unrelated
Describe the issue you're experiencing
If an element has
x-id=['name']and on the same elementx-datawith magic$id('name')is used, the magic$id('name')creates a new context on the fly. Only after that happened,x-idis evaluated: Alpine sees that the id-name has been used before, counts it up and sets this as the new id-context. Further calls to$id('name')are working as expected.Code snippets to reproduce the issue
Minimal reproduction on Codesandbox
Example a shows the bug, example b shows a workaround by using
x-idon a parent element.Screenshots/screen recordings
No response
How do you expect it to work?
I would expect, that the usage of
$idinsidex-datawould respect thex-idcontext. It looks to me as if thex-id-context is established only afterx-datahas been evaluated.Maybe it is a viable solution to not count up the found index inside packages/alpinejs/src/ids.js#L17 (via the call to
findAndIncrementId(name))Please confirm (incomplete submissions will not be addressed)