-
Notifications
You must be signed in to change notification settings - Fork 272
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ui5-input): Add highlighting #1943
Conversation
@@ -6,7 +6,7 @@ | |||
<span part="title" class="ui5-li-title"><slot></slot></span> | |||
{{/if}} | |||
{{#if description}} | |||
<span part="description" class="ui5-li-desc">{{description}}</span> | |||
<span part="description" class="ui5-li-desc">{{{description}}}</span> |
There was a problem hiding this comment.
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 {{{
packages/main/src/Input.js
Outdated
@@ -134,6 +134,19 @@ const metadata = { | |||
type: Boolean, | |||
}, | |||
|
|||
/** | |||
* Defines if characters within the suggestions to be highlighted |
There was a problem hiding this comment.
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
@@ -134,6 +134,19 @@ const metadata = { | |||
type: Boolean, | |||
}, | |||
|
|||
/** | |||
* Defines if characters within the suggestions to be highlighted | |||
* in case the input value matches parts of the suggestions text. |
There was a problem hiding this comment.
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.
packages/main/src/Input.js
Outdated
return; | ||
} | ||
|
||
const Suggestions = getFeature("InputSuggestions"); | ||
if (Suggestions) { | ||
this.Suggestions = new Suggestions(this, "suggestionItems"); | ||
this.Suggestions = new Suggestions(this, "suggestionItems", true); |
There was a problem hiding this comment.
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
?
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
Technical details:
<b>
tags around the characters that have to be highlighted and triple "{{{" moustache statements so these<b>
are interpreted properly.