Commit e4b8473
committed
fix(ios): center TextInput text, placeholder, and caret when lineHeight > fontSize
On iOS, when a TextInput's lineHeight exceeds its font's line height, UIKit
anchors glyphs to the bottom of the attributed-string line box instead of
centering them within it. The same misalignment affects the placeholder.
On single-line UITextField the caret is also sized to the full line box.
This patch fixes all three surfaces. The approach varies by UIKit
rendering path:
UITextView (multi-line) typed text — honors NSBaselineOffsetAttributeName.
Call RCTApplyBaselineOffset in RCTTextInputComponentView._setAttributedString:
to inject the offset. Re-seed NSParagraphStyleAttributeName from
defaultTextAttributes on ranges missing it (or carrying a zero-line-height
stub), because UIKit's typingAttributes drops the paragraph style between
keystrokes — without the re-seed the helper sees maximumLineHeight == 0 and
bails for typed content.
UITextField (single-line) typed text — does NOT honor NSBaselineOffsetAttributeName.
Per-range zero out paragraphStyle.minimumLineHeight / maximumLineHeight on
the displayed attributedText so UITextField uses the font's natural line
height; its built-in vertical centering then positions the glyph in the
bounds, and the caret rect (sized from the same line box) shrinks to match.
Other paragraph-style fields (alignment, indent) are preserved so nested
<Text> styling survives. The shadow node measures from state, so undo the
strip in _updateState before pushing — restore stripped line heights from
defaultTextAttributes so the cell height stays at the configured lineHeight
across edits.
Placeholder on both UITextField.attributedPlaceholder (UILabel draw) and
RCTUITextView._placeholderView — both honor NSBaselineOffsetAttributeName.
Add the offset computation to _placeholderTextAttributes on both backing
views so the placeholder is centered to match (single string, single set
of attributes — a direct computation is equivalent to RCTApplyBaselineOffset).
Bug only manifests on Fabric. Paper has had a similar baseline-offset fix in
RCTUITextView.attributedText since 0.66 (see RCTUITextView setAttributedText:),
which never made it into the Fabric component view.1 parent 4464ab0 commit e4b8473
3 files changed
Lines changed: 105 additions & 3 deletions
File tree
- packages/react-native
- Libraries/Text/TextInput
- Multiline
- Singleline
- React/Fabric/Mounting/ComponentViews/TextInput
Lines changed: 9 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
364 | 364 | | |
365 | 365 | | |
366 | 366 | | |
| 367 | + | |
| 368 | + | |
| 369 | + | |
| 370 | + | |
| 371 | + | |
| 372 | + | |
| 373 | + | |
| 374 | + | |
| 375 | + | |
367 | 376 | | |
368 | 377 | | |
369 | 378 | | |
| |||
Lines changed: 8 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
169 | 169 | | |
170 | 170 | | |
171 | 171 | | |
| 172 | + | |
| 173 | + | |
| 174 | + | |
| 175 | + | |
| 176 | + | |
| 177 | + | |
| 178 | + | |
| 179 | + | |
172 | 180 | | |
173 | 181 | | |
174 | 182 | | |
| |||
Lines changed: 88 additions & 3 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
712 | 712 | | |
713 | 713 | | |
714 | 714 | | |
715 | | - | |
| 715 | + | |
716 | 716 | | |
717 | 717 | | |
718 | | - | |
| 718 | + | |
719 | 719 | | |
720 | 720 | | |
721 | 721 | | |
| |||
729 | 729 | | |
730 | 730 | | |
731 | 731 | | |
732 | | - | |
| 732 | + | |
733 | 733 | | |
734 | 734 | | |
735 | 735 | | |
736 | 736 | | |
737 | 737 | | |
| 738 | + | |
| 739 | + | |
| 740 | + | |
| 741 | + | |
| 742 | + | |
| 743 | + | |
| 744 | + | |
| 745 | + | |
| 746 | + | |
| 747 | + | |
| 748 | + | |
| 749 | + | |
| 750 | + | |
| 751 | + | |
| 752 | + | |
| 753 | + | |
| 754 | + | |
| 755 | + | |
| 756 | + | |
| 757 | + | |
| 758 | + | |
| 759 | + | |
| 760 | + | |
| 761 | + | |
| 762 | + | |
| 763 | + | |
| 764 | + | |
| 765 | + | |
| 766 | + | |
| 767 | + | |
| 768 | + | |
| 769 | + | |
| 770 | + | |
| 771 | + | |
| 772 | + | |
738 | 773 | | |
739 | 774 | | |
740 | 775 | | |
| |||
768 | 803 | | |
769 | 804 | | |
770 | 805 | | |
| 806 | + | |
| 807 | + | |
| 808 | + | |
| 809 | + | |
| 810 | + | |
| 811 | + | |
| 812 | + | |
| 813 | + | |
| 814 | + | |
| 815 | + | |
| 816 | + | |
| 817 | + | |
| 818 | + | |
| 819 | + | |
| 820 | + | |
| 821 | + | |
| 822 | + | |
| 823 | + | |
| 824 | + | |
| 825 | + | |
| 826 | + | |
| 827 | + | |
| 828 | + | |
| 829 | + | |
| 830 | + | |
| 831 | + | |
| 832 | + | |
| 833 | + | |
| 834 | + | |
| 835 | + | |
| 836 | + | |
| 837 | + | |
| 838 | + | |
| 839 | + | |
| 840 | + | |
| 841 | + | |
| 842 | + | |
| 843 | + | |
| 844 | + | |
| 845 | + | |
| 846 | + | |
| 847 | + | |
| 848 | + | |
| 849 | + | |
| 850 | + | |
| 851 | + | |
| 852 | + | |
| 853 | + | |
| 854 | + | |
| 855 | + | |
771 | 856 | | |
772 | 857 | | |
773 | 858 | | |
| |||
0 commit comments