paymentFormInputsValid is set correctly, but when that keyup event happens, the modal disappears, and the black .modal-backdrop remains and doesn't allow any changes. It simply locks the user out and the page has to be refreshed.
Also, I previously had the button with more semantic handlebars, like this:
<button {{#unless session 'paymentFormInputsValid'}}disabled{{/unless}}
type="submit" class="btn btn-primary">
Make Payment
</button>
but that broke the submit button, and made it display like this:
Very broken.
How can I get modals to play nice with handlebars? Should I just go with a different strategy for this form?
Thanks in advance!
Update
I now have this solution cobbled together. The template being inserted to my modal:
<template name="paymentModalButton">
<button type="submit" class="btn btn-primary" {{paymentFormInputsValid}}>
Make Payment
</button>
</template>
<!-- In the appropriate place -->
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
{{> paymentModalButton}}
</div>
</div>
But, this still can't handle handlebars {{#if}} blocks, such as the one I wanted to use:
This still breaks the button rendering. It would be easier and more semantic to have this behavior, so if anyone can figure it out that would be delightful.
Update
I dug into the Elements, and here's what that button looks like.
<button <!--data:8trm3tvlatwn9qaw9--=""> type="submit" class="btn btn-primary">
Make Payment
</button>
Frankly I can't make any sense of that and why it's breaking. It's being generated from this, which is valid and works in other contexts:
<button {{#unless session 'paymentFormInputsValid'}}disabled{{/unless}} type="submit" class="btn btn-primary">
Make Payment
</button>
