Ngx-chips: Autocomplete not visible on modal dialog

[elhoo]

Hi,

I'm evaluating this and testing it together with a generated jhipster 4 project.

My problem is that the autocomplete values are not visible in my modal dialog.

After a lot of try-and-error I tried to set the template as in the most basic example (but with autocomplete):

    template: `<tag-input [ngModel]="['@item']" name="tags">
    <tag-input-dropdown [autocompleteItems]="autocompleteValues">
    </tag-input-dropdown>
</tag-input>`

Then I got this result:

When I'm using my normal templateUrl / page the autocomplete popup is below the modal dialog and thus not visible.

Is there any way to fix this?

[Gbuomprisco]

Hi @elhoo,

The z-index of your popup is a value bigger than the z-index of the dropdown. As a 3rd party, this is very difficult to nail: you may just want the popup over the dropdown, or maybe not, and unfortunately A2 at the moment has no tools to tackle this.

So - the dropdown has a z-index of 100 (which is, in my opinion, a sane default). As a way to solve this, I'd look at decreasing the z-index of the popup at a value < 100. Let me know if this is possible or not at your end. :)

[elhoo]

Tried to override it with no success.

JHipster uses Bootstrap 4 which seems to use z-index: 1050 - so it is quite much higher than 100..

I found this quite interesting: https://github.com/angular-ui/bootstrap/issues/3262 - "The reason the modal z-index can't be fixed at one constant value is that we added support for multiple modals, so that modals can stack on top of one another."

[Gbuomprisco]

Mhm, I guess this leaves me the option of dynamically appending the dropdown to another element (or, no element at all). At the moment the dropdown is appended to the body. I'll try that :)

[elhoo]

I am very new (actually very new, I'm a backend developer..) to all this, but could you perhaps point me to the place in your code that sets the z-index to 100? My plan is to do a local version until you hopefully finds a solution. Thanks!

[Gbuomprisco]

I see :) You'll need to find the element of the modal window (usually, the outer element) and set its z-index to 99. Beware this might have unintended consequences like other elements overlapping the popup, but if the app is coded well, this shouldn't happen.

[elhoo]

Well... I wanted to try to change the z-index the n2-tag-input uses (ie 100) to something like 9999. I think that it would be okay for temporary solution because I only use one modal at the time. However, I tried to search for "z-index" in your project but could find any obvious place to change :flushed:

[Gbuomprisco]

ng2-tag-input uses angular's emulated encapsulation, so unfortunately you cannot edit the style of the dropdown (or, at least, not very easily). Your best shot at this is editing the popup's z-index (hoping it doesn't use shadow dom as well) or wait until I solve the position inside the page of the dropdown.

[elhoo]

Ok... I will wait 😄

[Gbuomprisco]

Hi! So the option is now available, but it would need to be tested with your popup before declaring victory :) add the option appendToBody=false for the tag-input-dropdown component

[elhoo]

I tried it, but with no success on my project.

Then I added below to http://www.webpackbin.com/EJEeo77dM (which I think is it the latest demo..):

      <div class="section" style="background-color: grey; position: relative; z-index: 9000">
            <h3>Tags ... foo bar </h3>
            <tag-input [ngModel]="['@item']">
              <tag-input-dropdown 
                   [autocompleteItems]="['item1', 'item2', 'item3']" 
                                  [appendToBody]="false">
              </tag-input-dropdown>
            </tag-input>
              <br/>
              <br/>
        </div>

But then I get no suggestions (and no errors). If I change to true I can see them but not the first one...

[bailejl]

I have the same problem. I am using Angular2 with Material2. I have a Material2 dialog with the ng2-tag-input. The dialog has a z-index of 1000. The .ng2-dropdown-menu has a z-index 100. Trying to put a new z-index via one of the css files in my project fails, due to each module putting a prefix onto the css entries. If I put the new z-index in the top-level css file, it gets no prefix, but it is overridden. Any ideas on how to change the z-index?

[Gbuomprisco]

@bailejl you can't: the module uses emulated shadow-dom, which prevents that. I'll try check the error above though.

[bailejl]

I researched the issue and was able to fix it locally by modifying code in my node_modules folder. Based on my research the the line in ng2-dropdown-menu.ts, link below, is looking for a boolean, but is getting a string if (this.appendToBody). Also, the code only allows for attachment to the body. Once I added some code to attach the parent I declared in my template, the code worked as expected.

I was going to try and make the changes, but I cannot figure out how to get the parent I declare in my template. Also, I am not sure what is the best way to fix the code from getting a string. I am going to double check the string and see what I can do.

Link to code:
https://github.com/Gbuomprisco/ng2-material-dropdown/blob/master/src/modules/components/menu/ng2-dropdown-menu.ts#L232

[bailejl]

Also, the readme says appendToBody defaults to false, but all the values are true in the code.

https://github.com/Gbuomprisco/ng2-material-dropdown/blob/master/src/modules/components/menu/ng2-dropdown-menu.ts#L83

https://github.com/Gbuomprisco/ng2-tag-input/blob/master/modules/components/dropdown/tag-input-dropdown.component.ts#L103

[Gbuomprisco]

Hi @bailejl,

Thanks for looking into it. I found the bug(s) and will push a new version soon :)

Edit: the version is out, let me know if it works :)

[bailejl]

I unintsalled ng2-tag-input and did a npm install. The new version of ng2-tag-input was 0.8.5. Then I ran ng serve and got an error. Here is what I got:

ERROR in Error encountered resolving symbol values statically. 
Only initialized variables and constants can be referenced because the value of this 
variable is needed by the template compiler (position 5:22 in the original .ts file), 
resolving symbol Ng2DropdownModule in <project>/node_modules/ng2-tag-input/dist/node_modules/ng2-material-dropdown/index.d.ts, 
resolving symbol TagInputModule in <project>/node_modules/ng2-tag-input/dist/modules/ng2-tag-input.module.d.ts, 
resolving symbol TagInputModule in <project>/node_modules/ng2-tag-input/dist/modules/ng2-tag-input.module.d.ts

Note: <project> is my replacement for the prefix of the absolute path

[joshikeerti]

I installed the latest version 0.8.5 along with the dropdown version of 0.7.3, however the [appendToBody]='false' did not do anything. When i tried the [appendToBody]='true' , it appended to the body and was showing up under the modal.
I am using material dialog and using the tag with autocomplete in the modal.

[Gbuomprisco]

Hi @joshikeerti,

It's likely that the dropdown is somewhere else in the screen :| I'll test directly with AM2 when I get a chance :)

[elhoo]

I can confirm using version 0.9.2 that using [appendToBody]='false' makes the dropdown appears on the wrong place on the screen (however, it is now visible on my modal dialog).

[alouane]

Hi @elhoo @Gbuomprisco
I v juste run into that issue, I think the element that is causing the problem is a script that is dynamicaly updating both left & top position of the dropdown menu, you can get a quick fix by adding this style to your scss modal:
```css
:host /deep/ ng2-dropdown-menu div{
left: inherit !important;
top: inherit !important;
}

[philbgray]

hey @alouane - thanks for your input. Your fix doesn't work for me in Chrome /deep/ combinator is deprecated. - tried different things but nothing seems to work. Any idea how to fix this otherwise?

[alouane]

have you tried with appendToBody attribute set to true ?

[Simon-Briggs]

Thanks @alouane

I did something really similar to fix it. In my global css file I added:

my-form .ng2-dropdown-menu {
    top: inherit !important;
    left: inherit !important;
}

I guess this is a bug in ng2-dropdown-menu rather than ng2-tag input?

It does seem to be doing some taking into account of appendToBody:
https://github.com/Gbuomprisco/ng2-material-dropdown/blob/master/src/modules/components/menu/ng2-dropdown-menu.ts#L186

[bailejl]

@philbgray /deep/ in Angular2 in encapsulated view is its own thing and is not dependent on the browser. Are you using encapsulated view?

Also, appendToBody = true does not work in a modal dialog for me, but appendToBody = false does work.

https://angular.io/docs/ts/latest/guide/component-styles.html

[lokesh06061994]

[appendToBody]='false' makes the dropdown appears on the wrong place on the screen.

[seanmt13]

Also having the same issue [appendToBody]='false' makes the dropdown appears on the wrong place bottom right. Has anyone found a fix for this?

[rohittehlan]

@seanmt13 @lokesh06061994
I faced the same problem. I was able to get dropdown at correct position by setting [appendToBody]='false' for the tag-input-dropdown component and adjusting the css

HTML Code -

<tag-input-dropdown [appendToBody]="false"  
      [autocompleteItems]="['item1', 'item2', 'item3','item4']">
</tag-input-dropdown>

CSS Code -

tag-input tag-input-dropdown /deep/ ng2-dropdown div.ng2-dropdown-menu {
    top: inherit !important;
    left: inherit !important;
}

Hope it helps!

[Gbuomprisco]

Check out the option [zIndex] in version 1.7.5

[devshashi04]

Have a look, I had the same issue. and I got the solution, I have answered there

with name Dev Sabby

https://stackoverflow.com/questions/3217134/jquery-ui-autocomplete-inside-a-modal-ui-dialog-suggestions-not-showing/50856828#50856828

[gbosetti]

Hi. [appendToBody]=false is working with Angular 8. Thanks!