UITextView and UITextField knobs; a story

:  ~ 1 min read

UIKit does this really nice thing, where the user can tap around a text knob — with quite some margin, too — and still intercept the touch; but it appears that all knobs are created equal, but some are more equal than others; and so our story begins…

On one of our projects, the view for creating a challenge is full of UITextViews — almost all of them can have two rows or more, so we couldn’t use UITextFields. The default textContainerInsets were too big — at least vertically — so they were set to 0, at which point a problem arose: the knobs were cut off; and not only that, they weren’t intercepting touches around them, as they should. It all got weirder when I realised that on the profile page we have some UITextFields that work properly: the knobs are by default working properly 🤔

A few steps I tried and none worked:

This last point was where it got interesting. I used Reveal to find the knobs and tried to bring the to front, move them to the UIWindow, change their bounds, anything I could think of — nothing worked and the knobs, even if they were visible and on top of everything else, they weren’t intercepting touches around them. The Notes of a contact in Phone.app has the same problem: knobs are completely cut off until there is more text and the selection isn’t at the very edges.

Bonus points for extra weirdness: the knobs are contained in their parent, both in UITextView and UITextField, but when inspecting with Reveal, both of them appear as cut off, while on the app itself … UITextView knobs are also cut off, but UITextField knobs are fully visible and working ¯\_(ツ)_/¯.

Eventually we had to settle with a compromise: bigger textContainerInsets while editing, adjusted ones when not.

I’m almost sure I might be missing something here, so if you’ve encountered this problem before, I’d love to hear your story or any other suggestions @rolandleth.