Highlighted Option is Un-selectable

[dsuwirya]

Hi,

I'm currently using ng2-select v1.2.0, with Angular 2.4.8 - and experiencing a little problem with ng2-select multiple.

I have a country list just like the demo. When I start typing letters, then filtered options will be displayed correctly. But after that, clicking any highlighted text doesn't make it selected. This only happen if I click exactly on top of that highlighted text area, while if I click the surrounding it will be selected correctly.

I then tried to include directly the source. If I commented out the part where it's adding "strong" tag in the HighlightPipe ( line 18 ), then yes none of the option will show the highlighted part, but it's now becoming selectable correctly.

I attached the screenshot on how that particular highlighted part is rendered ( in Chrome ):

Hope somebody can help. Thanks.

[amitgaur208]

Me too facing the exact same issue but its not the solution to remove highlight feature.

[amitgaur208]

@dsuwirya in which file you removed highlight pipe as i was checking it by removing but still working same with issue

[dsuwirya]

I tried removing it from select-pipes.ts > HighlightPipe, on the line where it's adding strong tag.

[amitgaur208]

@dsuwirya Yes i found that but still not working in all browser and devices. Its too buggy. I need to use another alternate.

[BBaysinger]

We seem to have found the same issue, except that the initially mentioned workaround yielded no change in functionality. It is true that the option text is not clickable, but the enclosing div is. This may be a browser bug, as we replicated the issue in Chrome v57 but not in v58. This simple workaround fixes it with CSS:

.ui-select-choices-row .dropdown-item { pointer-events: none; }

.ui-select-choices .ui-select-choices-row { cursor: pointer; }

[StDannyDan]

@BBaysinger workaround fixed the issue for Chrome v66. To apply it in styles.scss had to add /deep/ option:

.ui-select-choices-row /deep/ .dropdown-item {
    pointer-events: none !important;
}

.ui-select-choices /deep/ .ui-select-choices-row {
    cursor: pointer !important;
}