Search code examples
iosswiftuitextfielduitextfielddelegateinputview

UITextField placeholder showing up with a shadow behind UITextField.text when setting text programatically. Why?


I'm setting a UITextField placeholder's text using:

textField.placeholder = "placeholder"

Then, as I am using a UIPickerView as my inputView, when a picker view element is selected I update the placeholder by doing textField.placeholder = nil and making the textField.text = "pickerViewValue". But the placeholder doesn't clear and there is a slight shadow behind the text as shown below:

https://i.sstatic.net/aQzwA.jpg

(You have to look really close to see it. You'll see it says 'Size' super faintly behind the darker L).

I've tried setting the text and attributedText as placeholders instead of using the placeholder property, but whenever I do this, the first value set to either text or attributedText remain in the background just like the placeholder text did. I've tried setting all these attributes to nil and to "". No dice. Wondering if anyone has had a similar issue.

Had trouble formatting code so here's a pastebin:

https://pastebin.com/pqmtaBeG

The important stuff is in the configure, updatePickerViews, and extensions of ProductView

let toolBar = UIToolbar()
  toolBar.barStyle = .default
  toolBar.isTranslucent = true
  toolBar.tintColor = globalAppleBlue
  toolBar.sizeToFit()

  let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action: nil)

  let doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItem.Style.plain, target: self, action: #selector(donePickerViewButtonTapped(_:)))
  doneButton.setTitleTextAttributes([
    NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18)], for: .normal)

  toolBar.setItems([spaceButton, doneButton], animated: false)
  toolBar.isUserInteractionEnabled = true

  let textField = VoraTextField(leftPadding: globalPadding * 1.5, rightPadding: 0.0)
  textField.backgroundColor = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 0.9)

  textField.placeholder = option.name.capitalized

  let imageView = UIImageView(image: UIImage(named: "right-angle"))
  imageView.contentMode = .scaleAspectFit

  textField.rightView = imageView
  textField.rightViewMode = .always
  textField.font = UIFont.boldSystemFont(ofSize: 16)
  textField.textColor = .black
  textField.delegate = self

  textField.inputAccessoryView = toolBar

  let pickerView = UIPickerView()
  self.pickerViewArray.append(pickerView)
  pickerView.showsSelectionIndicator = true
  pickerView.backgroundColor = .white
  textField.inputView = pickerView
  textField.borderStyle = .roundedRect

  pickerView.delegate = self

Solution

  • I'm not really sure what's causing the issue but as a workaround try to add solid background color in your textfield.

    UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 1) // changed alpha to 1
    

    Of course with that values, the color will be much darker.