Clay: multiselect Issue on labels with special characters

Created on 19 Mar 2020  ·  10Comments  ·  Source: liferay/clay

  • [✅] I have searched the issues of this repository and believe that this is not a duplicate.

What are the steps to reproduce?

Special characters escaped in _defaultAutocompleteItemSelected while not escaped in _addLabelItem at the filter.

What is the expected result?

Consistent behavior with the HTML escape in _addLabelItem like:
filteredItem => { return ( htmlEscape(filteredItem.data.label.toLowerCase()) === label.toLowerCase() );

Environment

| Tech | Version |
| ----- | ------- |
| clay-multi-select | v2.20.2 |

2.x clay-components bug

Most helpful comment

hi @bryceosterhaus,

Environment info:
Liferay dxp-2-7210

Reproduction steps:

  1. Create a vocabulary with name CITIES
  2. Create two categories in the vocabulary CITIES: ROMA and CANNETO SULL'OGLIO
  3. Create a Web Content with a model Basic Web Content
  4. In the box of the section METADATA, CITIES, type R, or RO, or ROM.
  5. The category ROMA will appear under the box
  6. If you click on the tip ROMA, the box will be filled in with ROMA (all is working fine)
  7. In the box of the section METADATA, CITIES type C, or CA, or CAN, etc.
  8. The category CANNETO SULL'OGLIO will appear under the box

Actual result :
If you click on the tip CANNETO SULL'OGLIO the box will not be filled in with CANNETO SULL'OGLIO, but only the entered characters will be filled in

Expected result :
After click on CANNETO SULL'OGLIO should be filled in as it happened with ROMA

All 10 comments

Other question related to the issue: Is it not better to use the value to compare at the filter instead of label comparison?

hey @bakayattila I think that comparing the label is a matter of experience for the user, where he is seeing the label, essentially the label must be more user friendly as the value may not be in some cases.

Hey @bakayattila, @matuzalemsteles is right. Take for example one of our usages: Category Selector

  • Label: Animals
  • Value: 408102 (categoryId)

That being said... @matuzalemsteles, @bryceosterhaus, don't we support some type of filterFn so this can be customized for different needs?

@bakayattila on second thought i think i'm confusing what you were saying 😅, when you refer to the filter to be compared it is the autocomplete or when adding a new label, we do this filter when adding the label to check if the value already exists, if it exists in the data it will take the data values ​​otherwise it will create a new label.

@jbalsas yeah, maybe it's a good one, we can check the case, @bakayattila do you have any particular case that needs to check the value?

@matuzalemsteles Yes in a particular situation where only the autocomplete future is allowed. Where the suggestions contain unescaped special characters while the autocomplete passes the item with HTML escaped label content,

@matuzalemsteles what do you think about the possible fix I recommended?

hey @bakayattila yeah, I think this solves the problem. We just need to test to make sure of the other cases.

@bakayattila could you provide a snippet of how to demo and test this?

hi @bryceosterhaus,

Environment info:
Liferay dxp-2-7210

Reproduction steps:

  1. Create a vocabulary with name CITIES
  2. Create two categories in the vocabulary CITIES: ROMA and CANNETO SULL'OGLIO
  3. Create a Web Content with a model Basic Web Content
  4. In the box of the section METADATA, CITIES, type R, or RO, or ROM.
  5. The category ROMA will appear under the box
  6. If you click on the tip ROMA, the box will be filled in with ROMA (all is working fine)
  7. In the box of the section METADATA, CITIES type C, or CA, or CAN, etc.
  8. The category CANNETO SULL'OGLIO will appear under the box

Actual result :
If you click on the tip CANNETO SULL'OGLIO the box will not be filled in with CANNETO SULL'OGLIO, but only the entered characters will be filled in

Expected result :
After click on CANNETO SULL'OGLIO should be filled in as it happened with ROMA

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hold-shift picture hold-shift  ·  3Comments

bicienzu picture bicienzu  ·  3Comments

drakonux picture drakonux  ·  3Comments

brunofarache picture brunofarache  ·  5Comments

kresimir-coko picture kresimir-coko  ·  3Comments