Description
Hi there, I'm following the Symfonycasts LAST stack tutorial, i'm in the modal part, and I think there's a bug when using the HTML syntax inside blocks defined in twig components.
First, here's the Modal code (bit different from the tutorial since i'm using bootstrap):
<div {{ attributes.defaults(stimulus_controller('modal')|stimulus_action('modal', 'close', 'turbo:before-cache@window').toArray()) }}>
{% block trigger %}{% endblock %}
<div class="modal fade" {{ stimulus_target('modal', 'modal') }}>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
{% if block('loading_template') %}
<template {{ stimulus_target('modal', 'loadingContent') }}>
{% block loading_template %}{% endblock %}
</template>
{% endif %}
</div>
Here's the code of me using it to add a "delete confirmation modal" (this part: https://symfonycasts.com/screencast/last-stack/modal-component#delete-modal-with-custom-content)
<twig:Modal>
{% block trigger %}
<twig:Button variant="danger" withOutline="true" title="Delete Payment" icon="fa-trash-alt" data-action="modal#open"></twig:Button>
{% endblock %}
Are you sure you want to delete this payment?
</twig:Modal>
No errors are thrown, but the button is just not displayed:
To make sure my twig:Button is correct, I added it just before the modal, no issues, the button appears as expected:
I switched from the HTML-like syntax to the {{component}} one:
<twig:Modal>
{% block trigger %}
{{ component('Button', {variant: "danger", withOutline: "true", title: "Delete Payment", icon: "fa-trash-alt", 'data-action': "modal#open"}) }}
{% endblock %}
Are you sure you want to delete this payment?
</twig:Modal>
and this does work, button shows up (with a small style issue but that's ok) and works as expected:
Let me know if more information is needed.
UPDATE: It seems like its mix-and-matching that does not work. If I use HTML syntax to define the block, then using the HTML syntax of the button does work:
<twig:Modal class="d-inline">
<twig:block name="trigger">
<twig:Button variant="danger" withOutline="true" title="Delete Payment" icon="fa-trash-alt" data-action="modal#open"></twig:Button>
</twig:block>
Are you sure you want to delete this payment?
</twig:Modal>
Using the {{component}} syntax inside the HTML block, also works:
<twig:Modal class="d-inline">
<twig:block name="trigger">
{{ component('Button', {variant: "danger", withOutline: "true", title: "Delete Payment", icon: "fa-trash-alt", 'data-action': "modal#open"}) }}
</twig:block>
Are you sure you want to delete this payment?
</twig:Modal>