RadListView 7.1.0 iOS item backgroundColor issue while deselecting

[felixkrautschuk]

Tell us about the problem

We want to get an identical behavior on Android and iOS for selecting items within RadListView. So instead those selection-circles on the left in iOS items, we also want just a special backgroundColor on iOS when items are selected, and the default backgroundColor if items are not selected.

What we do: We switch the css class of the outer container within the listitem, if the data-item's isSelected property is set to true or false.

<lv:RadListView.itemTemplate>
         <StackLayout className="{{ isSelected ? 'listitem-selected' : 'listitem' }}">
                 <!-- ... -->
         </StackLayout>
</lv:RadListView.itemTemplate>

.listitem {
    background-color: #f1f1f1;
}

.listitem-selected {
    background-color: #4d83db;
}

.listitem-selected Label {
    color: #ffffff;
}

In addition to switching the background-color, we also give a white color to all Labels within th selected listitem, so the user can better read the text of selected items with a dark background-color.

While this works as expected on Android (left), we have some trouble on iOS (right):

Actually, we already found out what is causing this: it's the FormattedString within the listitem template:

<StackLayout className="{{ isSelected ? 'listitem-selected' : 'listitem' }}">
          ...
          <Label className="description" textWrap="true">
              <Label.formattedText>
                  <FormattedString>
                      <FormattedString.spans>
                          <Span text="This item was created at:  " fontWeight="bold"/>
                          <Span text="{{ createdAt }}"/>
                      </FormattedString.spans>
                  </FormattedString>
             </Label.formattedText>
         </Label>
</StackLayout>

More specifically, the problem is the textWrap="true". When removing that, everything works as expected! But doing that is not an option for us, since this String can get longer in our real app and it needs to be wrappable to 1-3 lines.

Another option is to remove this style:

.listitem-selected Label {
    color: #ffffff;
}

But this is also no option for us...

Maybe it is more a bug in the FormattedString on iOS, but as it occured for us while using the RadListView, I decided to post this thread here.

We know that there is already the 8.1.1 version of RadListView, but we cannot migrate due to the issues: https://github.com/NativeScript/nativescript-ui-feedback/issues/1373 , https://github.com/NativeScript/nativescript-ui-feedback/issues/1404

Which platform(s) does your issue occur on?

iOS (tested 12.4 and 13.4, simulator and device)

Please provide the following version numbers that your issue occurs with:

• CLI: 6.5.0
• Cross-platform modules: 6.5.1
• Runtime(s): 6.5.0
• nativescript-ui-listview 7.1.0

Please tell us how to recreate the issue in as much detail as possible.

Follow the steps of the GIF above

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

RadListViewSelectionIssueIOS.zip