Skip to content

Commit 4c1c231

Browse files
fix(ios): resize single-line TextInput caret to font height
When `lineHeight > fontSize`, UITextField's default caret height matches `paragraphStyle.maximumLineHeight`, making the cursor visibly taller than the surrounding glyphs. Override `caretRectForPosition:` so the caret is sized to `font.lineHeight` and centered vertically within the full line-box instead.
1 parent f87adab commit 4c1c231

1 file changed

Lines changed: 14 additions & 1 deletion

File tree

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,20 @@ - (CGRect)caretRectForPosition:(UITextPosition *)position
223223
return CGRectZero;
224224
}
225225

226-
return [super caretRectForPosition:position];
226+
CGRect rect = [super caretRectForPosition:position];
227+
228+
// When `lineHeight > font.lineHeight`, UIKit sizes the caret to the full
229+
// line-box height, making it visually taller than the surrounding glyph.
230+
// Match the caret height to the font's intrinsic line height and center it
231+
// so it sits alongside the glyph rather than the whole expanded line-box.
232+
NSParagraphStyle *paragraphStyle = _defaultTextAttributes[NSParagraphStyleAttributeName];
233+
UIFont *font = _defaultTextAttributes[NSFontAttributeName];
234+
if (paragraphStyle && font && paragraphStyle.maximumLineHeight > font.lineHeight) {
235+
rect.origin.y += (rect.size.height - font.lineHeight) / 2.0;
236+
rect.size.height = font.lineHeight;
237+
}
238+
239+
return rect;
227240
}
228241

229242
#pragma mark - Positioning Overrides

0 commit comments

Comments
 (0)