Dropdown doesn't render when used inside a modal

[mwisner]

Hello,

I'm attempting to use the power-select control type in a simple form within a modal:

{{#bs-modal open=createInviteModalEnabled
            onSubmit=(action "inviteNewUsersSubmit")
            onHidden=(action "closeInviteModal") as |modal|}}
  {{#modal.header}}
    <h4 class="modal-title">{{fa-icon "users"}} Invite New User</h4>
  {{/modal.header}}

  {{#modal.body}}
    {{#bs-form onSubmit=(action "inviteNewUsersSubmit") model=newInvite as |form|}}
      {{form.element controlType="text" label="Name" placeholder="Bob Smith" property="metadata.name"}}

      {{#form.element controlType="power-select" label="Role" property="metadata.organization_role"  options=organizationRoles as |el|}}
        {{el.control searchEnabled=false}}
      {{/form.element}}

      {{form.element controlType="email" label="Email" placeholder="bob.smith@company.com" property="email"}}
    {{/bs-form}}
  {{/modal.body}}

  {{#modal.footer as |footer|}}
    {{#bs-button onClick=(action modal.close) type="danger"}}Cancel{{/bs-button}}
    {{#bs-button onClick=(action modal.submit) type="success"}}Invite User{{/bs-button}}
  {{/modal.footer}}

{{/bs-modal}}

I receive no errors in the console, but i'm also not seeing any options in the dropdown:

However, if I just copy and past the same form outside of the modal:

{{#bs-form onSubmit=(action "inviteNewUsersSubmit") model=newInvite as |form|}}
  {{form.element controlType="text" label="Name" placeholder="Bob Smith" property="metadata.name"}}

  {{#form.element controlType="power-select" label="Role" property="metadata.organization_role"  options=organizationRoles as |el|}}
    {{el.control searchEnabled=false}}
  {{/form.element}}

  {{form.element controlType="email" label="Email" placeholder="bob.smith@company.com" property="email"}}
{{/bs-form}}

The dropdown seems to appear just fine:

[simonihmig]

Hm, both (modals and power-select menus) use ember-wormhole to add their elements to DOM, but using different wormhole-containers. Probably the power-select menu is hidden, because the modal is in front. Needs to be fixed for sure...

[mwisner]

I did a little digging and that's exactly what it is... Adding a high z-index to the wormhole for power-select fixes the issue.

[simonihmig]

@mwisner thanks for confirming. Will keep this issue open for a built-in fix...

[dajk]

Hi @mwisner,
there is another, more convenient way, by adding power-select's renderInPlace property like so:

{{#form.element controlType="power-select" as |el|}}
  {{el.control searchEnable=false renderInPlace=true}}
{{/form.element}}

Hopefully this works for you.

[sumeetattree]

Does the component not support passing renderInPlace at the top level? The code below doesn't seem to be working.

<Form.element
  @controlType="power-select"
  @options={{this.i18n.localeList}}
  @optionLabelPath="text"
  @renderInPlace={{true}}
/>

However, this works.

<Form.element
  @controlType="power-select"
  @options={{this.i18n.localeList}}
  @optionLabelPath="text"
  as |Element|
>
  <Element.control @renderInPlace={{true}} />
</Form.element>

I can see the code below does support passing in renderInPlace at the top level. Not sure what might be causing it to not work. Any ideas?

https://github.com/kaliber5/ember-bootstrap-power-select/blob/5eec6c5597cea6ae90d315f3ad80f1752b66f9fd/addon/templates/components/bs-form/element/control/power-select.hbs#L96

[simonihmig]

As mentioned on Discord already, the Form.element can only pass known and supported properties down to the control component. renderInPlace is not among those. So the second example above is indeed the way to use it, passing props to the exposed control component directly.

[jelhan]

I can confirm that this is still an issue even after upgrade to Ember Power Select v3 and Ember Bootstrap v3.

Will keep this issue open for a built-in fix...

@simonihmig Do you still consider a built-in fix? I'm tending to only document that edge case and setting renderInPlace as a work-a-round.

[ohcibi]

This is not a bug and not about renderInPlace. This is because the modals z-index and the options are the same. The solution is to set a dropdownClass for the power select like this:

<form.element @controlType="power-select" .... as |el|>
   <el.control @dropdownClass="in-modal" />
</form.element>

.in-modal {
  z-index: 9000;
}

[jelhan]

Thanks for looking into this one @ohcibi.

Wondering why both are using the same z-index:

• For Ember Bootstrap's modal it's the .modal class of Bootstrap that has z-index: 1050. We might not want to touch this as it's a default Bootstrap class.
• For Ember Power Select the .ember-basic-dropdown-content class has a z-index: 1000.

We might be able to change the one of Ember Power Select to be slightly higher as the one used by an Ember Bootstrap modal. This would be an easy fix for everyone.

The value is controlled by SCSS variable $ember-basic-dropdown-content-z-index, which defaults to 1000.

Overriding it from Ember Power Select might cause issues as this would leak to other consumers of Basic Dropdown. Maybe we should propose the change upstream and see if it gets accepted. If not we can still invoke Ember Power Select with a custom class to control it's z-index at least if used through ember-bootstrap-power-select.

[ohcibi]

The z-Index issue with bootstrap is a known one for power select. Our solution involves bootstraps sass variables. We set the z-index to $zindex-tooltip which is above modals. I wouldn’t adress this in this addon as this is beyond scope. I would just add that to the readme and link to the power select troubleshooting page for further reading.

[oliverlj]

Boostrap also have a $zindex-modal variable

[ohcibi]

Maybe it is worth then to add something like z-index: $zindex-modal + 10 as a sane default. Must have overlooked that var. Thanks for pointing out.

[jelhan]

@ohcibi Also thought about it. But how would you do so? Currently this addon does not provide any SCSS. Should we create a small wrapper around Ember Power Select's Bootstrap theme and ask people to use that one instead?

- @import 'ember-power-select/themes/bootstrap';
+ @import 'ember-bootstrap-power-select';
@import 'ember-power-select';

Or should we patch the ember-power-select/themes/bootstrap.scss? Technically speaking we would be able to do so. But overwriting a file provided by another addon might be considered a bad practice.

[ohcibi]

I'd always provide scss for importing only needed styles. Shipping an entire bootstrap css can interfere with all sorts of stuff. I'm thinking of something like opting out from auto loading bootstrap and let the developer explicitly import only necessary styles.

[jelhan]

I'd always provide scss for importing only needed styles. Shipping an entire bootstrap css can interfere with all sorts of stuff. I'm thinking of something like opting out from auto loading bootstrap and let the developer explicitly import only necessary styles.

I can't follow. This addon does not ship any styles so far.