x-cloak not working when alpinejs is deferred

[mlab817]

So it is recommended to defer the loading of the alpinejs script. However, it seems that x-cloak does not hide the element until the whole page has been loaded and alpinejs is initialized. Is this the expected behavior or am i missing something?

<dd x-data="{ isEditing: false, total_project_cost: 0 }">
  <input x-show="!isEditing" @click="isEditing = true; $nextTick(() => $refs.total_project_cost.focus());" class="form-control" type="text" readonly x-bind:value="addComma(total_project_cost)">
  <div x-cloak>
       <input x-show="isEditing" x-ref="total_project_cost" name="total_project_cost" id="total_project_cost" x-model="total_project_cost" class="form-control">
       <button x-show="isEditing" x-bind:disabled="!total_project_cost" class="btn" type="submit">Save</button>
       <button x-show="isEditing" class="btn" type="button">Cancel</button>
   </div>

   <script>
         function addComma(val) {
             return val.toLocaleString();
        }
    </script>
</dd>

I added the other scripts because maybe the variables inside the x-cloak div is messing with it.

[alexej-d]

This ist expected behavior. You need to add this CSS snippet somewhere before the cloaked elements:

[x-cloak] {
  display: none !important;
}

Btw. this is described in the docs here.

[mlab817]

Thanks! I just read it now.