[Android] - Using setting maxLength for Editor in a listview duplicating its value.

Question

Hi,

I am using a Xamarin ListView with RecycleElement. The listView contains

<ListView
            Grid.Row="2"
            CachingStrategy="RecycleElement"
            ItemsSource="{Binding Items}"
            SeparatorVisibility="None"
            HasUnevenRows="True"
            IsVisible="{Binding IsEmpty, Converter={converters:ReverseBoolConverter}}"
            ItemTemplate="{StaticResource itemTemplate}"
            x:Name="ParentList" />

This ListView contains controls of the different types. However all the elements are inherited from one control. so the basic structure is the same and only whats inside the controls change. This is why RecycleElement is the preferred use and it helps with performance as well. However I have a situation where on of the controls have a text box. This text box control is a parent stacklayout which has another stackLayout which has a Xamarin Forms editor. The parent accepts the MaxCharacter binding value and sets the Maxlength property on the Child Editor.
The structure is as follows:

ListView {
    Parent 1 {
             Parent2{ 
                `Editor
             }
       }
}

This is the code i use in the xaml.cs file for top level parent. The MaxCharacter is being set from outside, through a page model.

public static readonly BindableProperty MaxCharacterProperty = BindableProperty.Create(nameof(MaxCharacter),
            typeof(int?), typeof(ObzervrTextboxControl), null, BindingMode.OneWay, null, OnMaxCharacterPropertyChanged);


    public int? MaxCharacter
    {
        get { return (int?)GetValue(MaxCharacterProperty); }
        set { SetValue(MaxCharacterProperty, value); }
    }
    private static void OnMaxCharacterPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)
    {
        var control = bindable as ObzervrTextboxControl;
        if (control == null)
        {
            return;
        }
        control.Parent2.TextBoxEditor.MaxLength = (newvalue as int?) ?? 0;
    }

When there are two Parent1 in the view, its fine. however when i scroll down to see the ones not in initial view, the value for MaxCharacter is for the first is leaking into the new Parent1's in the new view

For example when opening the list
i see a control of type parent 1. It has the maxlength set correctly (eg: 10) and the editor has the value "abcdefghij"
There is another control of type parent 1 not in view initially. I scroll down and set the value for its editor as "1234567890123456789".
I scroll up to the initial control of parent. It looks fine and works as expected. However when i scroll down again i can see that the second control is using the first controls Maxlength/ MaxCharacter. I.e The value "1234567890123456789" gets cut to "1234567890"

This is an android only issue with Xamrin. using the latest forms.

How do i get about fixing this leak of one state of a control leaking into another control of the same type while scrolling?

Answer 1

Actually the fix to this is simple

private static void OnMaxCharacterPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)
{
var control = bindable as ObzervrTextboxControl;
if (control == null)
{
return;
}
control.Parent2.TextBoxEditor.MaxLength = (newvalue as int?) ?? 0;

     control.Parent2.TextBoxEditor.Text = control.TextValue; // Fix
 }

Recycling element uses the previous control in the list but merely changes it state. Turns out the text is just the UI doing its thing after it uses the previous control's maxlength has cut it off.