EditText in ListView is updated by onTextChanged when scrolling

Question

I have been searching for an answer to this, but the solutions don't seem to work for me. I have a TextView and an EditText in a list item. I am trying to update the stored values for the EditTexts when the user edits them.

@Override
public View getView(int index, View convertView, ViewGroup parent) {
    ViewHolder holder = null;
    final int pos = index;
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.user_details_list_row, parent,false);
        holder = new ViewHolder();
        holder.mCaptionTextView  = (TextView)convertView.findViewById(id.user_detail_row_caption);
        holder.mDetailEditText = (EditText)convertView.findViewById(id.user_detail_row_value);
        convertView.setTag(holder);
    }else{
        holder = (ViewHolder) convertView.getTag();
    }

    holder.mDetailEditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {              
            mUserDetails.set(pos, s.toString());
        }
    });     

    holder.mCaptionTextView.setText(mUserCaptions.get(index));
    holder.mDetailEditText.setText(mUserDetails.get(index),BufferType.EDITABLE);

    return convertView;
}

public static class ViewHolder{
    public TextView mCaptionTextView;
    public EditText mDetailEditText;
}

When I do this, scrolling triggers the TextWatcher and updates the values, overwriting correct text with duplicate text from one of the other EditTexts.

Instead of a TextWatcher, I've also tried this code:

holder.mDetailEditText.setOnFocusChangeListener(new OnFocusChangeListener() {

@Override
public void onFocusChange(View v, boolean hasFocus) {
    if (!hasFocus){
        EditText et =   (EditText)v.findViewById(id.user_detail_row_value);
        mUserDetails.set(index, et.getText().toString().trim());
    }
}
});

And it also updates the wrong EditTexts. What am I missing here?

Edit: Also tried this:

        final ViewHolder testHolder = holder; 
    holder.mDetailEditText.setOnFocusChangeListener(new OnFocusChangeListener() {

        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (!hasFocus){
                EditText et =   (EditText)v.findViewById(id.user_detail_row_value);
                mUserDetails.set(testHolder.ref, et.getText().toString().trim());
            }
        }
    });

It corrects the scrolling change issue I was seeing, but now after editing one of the EditTexts, it changes a bunch of the others as well.

Answer 1

The problem is related to the fact that you are not removing the previously added text watcher from the EditText widget. Instead, you keep appending new watchers to the list. Once you attempt to edit widget content all text watchers get notified sequentially, resulting in wrong user details being updated.

EditText/TextView does not provide a way to remove previously added text watchers without having an explicit reference to them. This means you will have to rework your code to keep references to text watchers and to either create/add/remove watchers for every getView method execution or to extend TextWatcher allowing altering user details to update once it gets fired. The latter is implemented below.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder = null;
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.user_details_list_row, parent,false);
        holder = new ViewHolder();
        holder.mCaptionTextView  = (TextView)convertView.findViewById(id.user_detail_row_caption);
        holder.mWatcher = new MutableWatcher();
        holder.mDetailEditText = (EditText)convertView.findViewById(id.user_detail_row_value);
        holder.mDetailEditText.addTextChangedListener(holder.mWatcher);
        convertView.setTag(holder);
    } else{
        holder = (ViewHolder) convertView.getTag();
    }

    holder.mCaptionTextView.setText(mUserCaptions.get(position));

    holder.mWatcher.setActive(false);
    holder.mDetailEditText.setText(mUserDetails.get(position),BufferType.EDITABLE);
    holder.mWatcher.setPosition(position);
    holder.mWatcher.setActive(true);

    return convertView;
}

static class ViewHolder{
    public TextView mCaptionTextView;
    public EditText mDetailEditText;
    public MutableWatcher mWatcher;
}

class MutableWatcher implements TextWatcher {

    private int mPosition;
    private boolean mActive;

    void setPosition(int position) {
        mPosition = position;
    }

    void setActive(boolean active) {
        mActive = active;
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) { }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) { }

    @Override
    public void afterTextChanged(Editable s) {
        if (mActive) {
            mUserDetails.set(mPosition, s.toString());
        }
    }
}

Hope this helps.

Answer 2

Check your index value if it matches with the row position you are working on. If you use the holder pattern maybe that value wont change from 0 to 7-8 depending in your screen size. Something like that happened to me once, I think I solved it by implementing the getCount method. This way the row 50 gave me the position 50 and not 7 (for example).