ember.jsmodal-dialogember-octane

Ember JS Issues With Trying To Pass an Action Into a Named Block

I'm trying to make a modal component from scratch in ember js and I'm running into an issue with the button to open the modal. I want to allow the open button to be passed to the component using a block called <:buttonContent></:buttonContent> and pass in the function to open the modal. For some reason with this approach the open action only works once and then the button does nothing when clicking it. I can see that the button state is correct and it works as expected if I use a button directly in the modal component.

{{!-- template using component--}}
<Modal>
    <:buttonContent as |action|>
        <Button::Basic @action={{action}}>
            AddCoin
        </Button::Basic>
    </:buttonContent>
    <:default>
    </:default>
</Modal>

{{!-- template for component --}}

{{#if (has-block "buttonContent")}}
    {{yield this.open to="buttonContent" }}
{{/if}}

{{#if this.isOpen}}
    <div class="curtain">
    </div>
{{/if}}

{{#if this.isOpen}}
    <div class={{concat "modal " ( if this.isOpen 'open' 'closed')}}  {{focus-trap isActive=this.isOpen focusTrapOptions=this.focusTrapOptions}}>
        <Button::Icon @icon="close" @action={{this.close}} class="close-button"></Button::Icon>
        <div class="modal-content">
            {{yield}}
        </div>
    </div>
{{/if}}

// component controller

import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ModalComponent extends Component {

    @tracked isOpen= false;

    focusTrapOptions = {
        allowOutsideClick: this.clickOutside
    }

    @action clickOutside(): boolean {
        this.close();
        return false;
    }
    
    @action open(): void {
        this.isOpen = true;
    }

    @action close(): void {
        this.isOpen = false;
    }
}

I tried putting in a debugger breakpoint on the action and can see that it gets hit on the first call but all subsequent calls don't trigger it. I can also tell that other buttons still work on the page even though the open modal button doesn't.

Solution

  • Moving comments to an answer here for SEO stuff:

    any usage of the word action is at risk of conflicting with some old/legacy/classic (pre-octane) behaviors/paradigms.

    This behavior is on the slate for removing / fixing for Ember v6 🤞 (RFC Pending, ofc). "classic ember" isn't fully deprecated yet, in ember v5.0