When menu items contain HTML tags, clicking does not always select an item

[RozennK]

When the items in a select box are HTML strings, clicking on a menu item does not always select the item or fire the "select" event. This seems to depend on the HTML tags; with

or

the clicks fail more often than not. This is much less true with , but clicks still occasionally fail, and do so more often the more tags there are.

Looking into the events it seems that the "mousedown" event gets triggered (but won't get triggered a second time if one clicks on the same menu item twice), but the "mouseup" event does not.

This happens with versions 1.2.0 and 2.0.0.

[optimistex]

HI! For first. The component has continued developing in the fork: https://github.com/optimistex/ngx-select-ex Check the demo: https://optimistex.github.io/ngx-select-ex/

About the bug report. If an item contains HTML tag and in the tag performed "event.stopPropagation()" then it will break selecting the item.

[RozennK]

Thank you for the reply! Does the fork mean this project is no longer being developed?

As far as "event.stopPropagation()" goes, how does one prevent a tag from performing it?

[optimistex]

Thank you for the reply! Does the fork mean this project is no longer being developed?

I have no official answer. But absent behavior from authors seems they have no time for it.

As far as "event.stopPropagation()" goes, how does one prevent a tag from performing it?

Check your code. Typical code:

<some-tag (click)="doClick($event)">

// ...........
doClick(e: Event) {
   e.preventDefault();
   e.stopPropagation();  // << possible a reason of the trouble
   // ..... do something .....
}
// ...........

[RozennK]

I have no code that calls stopPropagation(). It's just text formatted with divs or spans with and without classes. If those tags are calling stopPropagation() then they are doing so behind the scenes, hence my question of how to prevent it.

Example of an item in the array provided to [items]: { id: brief.ID, text: <div>${brief.commercialName}&nbsp;&nbsp;<span class="text-gray-light smaller-font">${info}</span><br><span class="second-line-of-select smaller-font">(${brief.ID})</span></div> }

With the

the clicks fail all the time. Without it they fail much more rarely.

[optimistex]

Right now I checked your code on the "ngx-select-ex v3.3.5" and have not found any troubles.

export class RichDemoComponent implements OnInit {
    public items: any[] = [];

    public ngxValue: any = [];
    public ngxDisabled = false;

    public ngOnInit(): any {
        COLORS.forEach((color: { name: string, hex: string, disabled: boolean }) => {
            this.items.push({
                id: color.hex,
                // text: `<colorbox style='background-color:${color.hex};'></colorbox>${color.name} (${color.hex})`,
                text: `<div>${color.hex}&nbsp;&nbsp;
                        <span class="text-gray-light smaller-font">${color.hex}</span><br>
                        <span class="second-line-of-select smaller-font">(${color.hex})</span>
                       </div>`,
                disabled: color.disabled
            });
        });
    }
}

Result:

[RozennK]

Thank you, using your fork does indeed solve the problem!

I have some questions about changing from ng2-select to ngx-select-ex however (please tell me if this is not the appropriate forum to ask):

• I see the input [active] does not exist in ngx-select-ex; is there an exact equivalent, or is that functionality implemented differently there?
• Are the CSS classes involved different?
• Also, we are currently migrating from Angular 4.4.4 to Angular 5; in the meantime, which version of ngx-select-ex runs with Angular 4.4.4? 3.3.5 raises a metadata error.

[optimistex]

please tell me if this is not the appropriate forum to ask

Feel free to ask me!

---

I see the input [active] does not exist in ngx-select-ex; is there an exact equivalent, or is that functionality implemented differently there?

Just use [(ngModel)] or [formControl] or [formControlName]. It is more native and useful.

---

Are the CSS classes involved different?

Styles and customization: https://github.com/optimistex/ngx-select-ex#styles-and-customization There is still saved ui-select-... classes for backward compatibility. But later I'll remove them.

---

Also, we are currently migrating from Angular 4.4.4 to Angular 5; in the meantime, which version of ngx-select-ex runs with Angular 4.4.4? 3.3.5 raises a metadata error.

Use npm i ngx-select-ex@ng4. And, give me a full text of the error. I'll figure out: about ensure compatibility.

[RozennK]

Thank you for your help! Using [formGroup] and [formControlName] seems to work. However it didn't solve the biggest issue I have so far, which is that the width is different from what it was before. I haven't found an obvious reason for this in the CSS or code so far. Is this issue familiar to you?

[optimistex]

By default in the angular the wrapper of a component has style display: inline.

You are may customize it.

<ngx-select class="custom-select" ...></ngx-select>

.custom-select {
   display: block;
   width: 300px; // or what are you want?
}

[RozennK]

It seems in my case the display is "block":

The ngx-select input is in a parent div (which has display:flex) along with a button next to it, with both supposed to fill the parent div's width. With ng2-select they did; this meant a width of 460px or so for the ng-select element. Now it has a width of 161px for no reason I can see, and the parent div is half empty. The button seems unchanged. I don't think imposing a pixel width would work in this case as it wouldn't be responsive to changes in the parent's width.

ETA: I think I found the cause of the difference! ng-select has the css properties "flex-basis:0%", "flex-grow:1" and "flex-shrink:1" that ngx-select does not. Adding those to ngx-select solves my problem.

SECOND ETA: Actually the previous flex behavior was added to ng-select by some other css in my application, so this does not actually reflect a difference between ng-select and ngx-select. Thank you very much for your help all the same!