HTML entities in $select.search not handled

[gklandes]

if the value to be displayed in the dropdown is not allowed by $sanitize it is removed. We ran into this when testing a list that included an item, ''.

The behavior is that the 'unsafe' portion of item is stripped. In another test case, the value 'aa' was rendered as 'aa' in the dropdown.

Our test case would be:

describe('"highlight" filter', function () {
  var highlightFilter;
  beforeEach(module('ui.select'));
  beforeEach(inject(function ($filter) {
    highlightFilter = $filter('highlight');
  }));
  it('should work correctly for html entities', function () {
    expect(highlightFilter('before <match> after', 'nomatch')).toEqual('before &lt;match&gt; after');
    expect(highlightFilter('before <match> after', '<match>')).toEqual('before <span class="ui-select-highlight">&lt;match&gt;</span> after');
  });
});

We have experimented with a number of solutions including http://codepen.io/gklandes/pen/QwXeXW. But do not have anything suitable for a pull request at this point.

[rzschech]

I use characters \u0002 and \u0003 to stand in for the start and end points for the styling elements while the html is escaped:

    filter('highlightHtmlSafe', function($sce) {
        function escapeHtml(value) {
            return value.
                replace(/&/g, '&').
                replace(/</g, '&lt;').
                replace(/>/g, '&gt;').
                replace(/'/g, '&#39;').
                replace(/"/g, '&quot;');
        }

        function escapeRegexp(queryToEscape) {
            return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
        }

        return function(matchItem, query) {
            if (query) {
                matchItem = matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '\u0002$&\u0003');
                matchItem = escapeHtml(matchItem);
                matchItem = matchItem.replace('\u0002', '<strong>').replace('\u0003', '</strong>');
            }
            else {
                matchItem = escapeHtml(matchItem);
            }

            return $sce.trustAsHtml(matchItem);
        };
    })

[rohitpagariya]

+1, I am also seeing this behavior. See plunkr

I worked around this issue by manually escaping the values

[user378230]

The highlight filter is only provided as an example, it isn't expected to cover all use cases.