Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using with overlays? #120

Closed
lougreenwood opened this issue Mar 20, 2018 · 2 comments
Closed

Using with overlays? #120

lougreenwood opened this issue Mar 20, 2018 · 2 comments

Comments

@lougreenwood
Copy link

@lougreenwood lougreenwood commented Mar 20, 2018

Hi!

I'm new to Ember, so please forgive if this is an obvious question.

But is there a recommended way to render a page overlay when showing the dialog? I've put together my own solution (below), but because the overlay is contained within my button-with-dialog component, ember-attacher seems to treat the overlay as part of the popper-trigger, this results in:

  • overlay is shown when dialog is triggered - correct
  • overlay is hidden when dialog is hidden (e.g hideOn='clickOut') - correct
  • dialog/overlay are not hidden when clicking on the overlay
<button>
    {{{button-label}}}

    {{#attach-popover
        class="ember-attacher-popper c-dialog c-dialog__panel"
        hideOn='clickout'
        isShown=false
        onChange=(action (mut isShown))
        placement="bottom"
        showOn='click'
        flip='bottom top'
        lazyRender=true
    }}
        {{yield}}
    {{/attach-popover}}
</button>

{{#if isShown}}
    <div class="c-page__dialog-overlay" {{action (mut isShown)}}></div>
{{/if}}
@kybishop

This comment has been minimized.

Copy link
Owner

@kybishop kybishop commented Mar 21, 2018

Hey @lougreenwood, I'm not sure I understand where the overlay is within your template. By "overlay" do you mean the popover?

hideOn='clickout' should hide the popover as soon as the user clicks any element that is outside of the <button>. The only thing that could bork this is if interactive is true.

Are you on the latest version of ember-attacher?

@kybishop

This comment has been minimized.

Copy link
Owner

@kybishop kybishop commented Apr 3, 2018

Happy to help with this if given more details. Closing for now.

@kybishop kybishop closed this Apr 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.