Skip to content

Conversation

@ilhan007
Copy link
Contributor

@ilhan007 ilhan007 commented Jul 10, 2020

Add highlighting support for the suggestion text and suggestion description,
that can be enabled with the newly added "highlight" property of the Input.

FIXES: #1918

Screenshot 2020-07-10 at 4 35 37 PM

Technical details:

    • The idea is to add <b> tags around the characters that have to be highlighted and triple "{{{" moustache statements so these <b> are interpreted properly.
  • New item SuggestionListItem ui5-li-suggestion-item introduced that allows rendering of markup
  • Add opening tag "<" replacement to avoid XSS

{{/if}}
{{#if description}}
<span part="description" class="ui5-li-desc">{{description}}</span>
<span part="description" class="ui5-li-desc">{{{description}}}</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's discuss this in a wider round. If we use {{{ for the representation of a property that can be set programatically in a so common component, this could be a security risk. We could strip script tags from the description to counter the problem too.

The same goes for the other 2 places with {{{

},

/**
* Defines if characters within the suggestions to be highlighted
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to be => are to be


/**
* Defines if characters within the suggestions to be highlighted
* in case the input value matches parts of the suggestions text.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe also add a comment that it only works with suggestions enabled.

const Suggestions = getFeature("InputSuggestions");
if (Suggestions) {
this.Suggestions = new Suggestions(this, "suggestionItems");
this.Suggestions = new Suggestions(this, "suggestionItems", true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be this.hightlight instead of true?

@ilhan007 ilhan007 removed their assignment Jul 14, 2020
@vladitasev vladitasev merged commit 673ed8d into master Jul 20, 2020
@vladitasev vladitasev deleted the feat-inp branch July 20, 2020 13:18
vladitasev pushed a commit that referenced this pull request Jul 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Highlight feature for ui5-li/ui5-suggestion-item

4 participants