UITextField placeholder text overlay issue

Question

I have a table view with three table view cells. During cell configuration, I add a UITextField to each of the cells and I also set the placeholder value on all of the text fields. When the table view loads the end results looks like this:

The issue I'm having, is that when I scroll any of the cells "off the screen" when they reappear the placeholder text get darker and darker, like here:

When I then attempt to change the UITextField string value by typing a name in, or by programatically changing the placeholder value on the last cell, the old value of those properties stays, and the new value gets overlaid in the cell, like this:

Here are the methods responsible for configuring those cells:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    // Configure the cell...
    [self configureCell:cell forIndexPath:indexPath];

    return cell;
}

- (void)configureCell:(UITableViewCell *)cell forIndexPath:(NSIndexPath *)indexPath
{
    for (UIView *subview in cell.contentView.subviews) {
        [subview removeFromSuperview];
    }

    cell.backgroundColor = [UIColor whiteColor];
    cell.autoresizesSubviews = YES;
    cell.clearsContextBeforeDrawing = YES;
    CGRect textFieldFrame = cell.bounds;
    textFieldFrame.origin.x += 10;
    textFieldFrame.size.width -= 10;

    UITextField *textField = [[UITextField alloc] initWithFrame:textFieldFrame];
    textField.adjustsFontSizeToFitWidth = YES;
    textField.textColor = [UIColor lightGrayColor];
    textField.enabled = YES;
    textField.userInteractionEnabled = NO;
    textField.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    textField.clearsContextBeforeDrawing = YES;
    textField.clearsOnBeginEditing = YES;

    if (indexPath.section == ATTAddNewTimerSectionName) {
        textField.placeholder = @"Name";
        textField.userInteractionEnabled = YES;
        textField.delegate = self;
        textField.returnKeyType = UIReturnKeyDone;
        textField.clearButtonMode = UITextFieldViewModeWhileEditing;
    } else if (indexPath.section == ATTAddNewTimerSectionDate) {
        textField.placeholder = @"Date/Time";
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    } else if (indexPath.section == ATTAddNewTimerSectionCalendar) {
        if (self.userCalendarEvent == nil) {
            textField.placeholder = @"See list of calendar events";
        } else {
            textField.placeholder = nil;
            textField.placeholder = self.userCalendarEvent.title;
        }
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }
    [cell addSubview:textField];
}

As you can see, I have tried various things, like removing all the subviews before adding a new view to the cell or setting -[UIView setClearsContextBeforeDrawing:YES] on both the cell and the UITextView and even setting the placeholder value to nil without success.

Any pointers would be much appreciated!

Answer 1

You are making a classic error that so many people make. Cells get reused as a table is scrolled.

As written, your code keeps creating and adding a new text field every time the cell is used. So you are seeing the result of having multiple text fields in a cell.

You want to only add one text field to a cell. Update your code so it only adds the text field if it isn't there already.

It seems you have a logic problem in the code. You add the text field directly to the cell but you try to remove it from the cell's contentView .

Change this:

[cell addSubview:textField];

to:

[cell.contentView addSubview:textField];