feat(TextField): support css white-space and text-overflow (#10737)

NathanWalker · web-flow · commit ac2e6a09284f · 2025-06-23T19:54:41.000-07:00
diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
@@ -260,4 +260,10 @@ Button {
 
 .no-shadow {
     box-shadow: none;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
diff --git a/apps/toolbox/src/pages/forms.xml b/apps/toolbox/src/pages/forms.xml
@@ -24,6 +24,10 @@
       <TextView hint="Type text..." style.placeholderColor="silver" textChange="{{textChangeArea}}" color="black" width="80%" borderColor="silver" borderWidth="1" height="200" borderRadius="4" fontSize="14">
       </TextView>
 
+      <Label text="TextField white-space + text-overflow" fontWeight="bold" marginTop="12" />
+      <TextField text="https://a.very.long.url.that.needs.to.be.truncated.com/" class="truncate" marginTop="6" backgroundColor="#efefef" padding="8" fontSize="18" height="60">
+      </TextField>
+
     </StackLayout>
   </ScrollView>
 </Page>
diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts
@@ -91,7 +91,7 @@ export namespace CoreTypes {
 		export const lowercase = 'lowercase';
 	}
 
-	export type WhiteSpaceType = 'normal' | 'nowrap' | CSSWideKeywords;
+	export type WhiteSpaceType = 'normal' | 'nowrap' | 'wrap' | CSSWideKeywords;
 	export namespace WhiteSpace {
 		export const normal = 'normal';
 		export const nowrap = 'nowrap';
diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts
@@ -318,7 +318,7 @@ export const textStrokeProperty = new InheritedCssProperty<Style, string | Strok
 });
 textStrokeProperty.register(Style);
 
-const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap'));
+const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap', 'wrap'));
 export const whiteSpaceProperty = new InheritedCssProperty<Style, CoreTypes.WhiteSpaceType>({
 	name: 'whiteSpace',
 	cssName: 'white-space',
diff --git a/packages/core/ui/text-field/index.android.ts b/packages/core/ui/text-field/index.android.ts
@@ -1,7 +1,5 @@
 import { TextFieldBase, secureProperty } from './text-field-common';
-import { whiteSpaceProperty } from '../text-base';
 import { keyboardTypeProperty } from '../editable-text-base';
-import { CoreTypes } from '../../core-types';
 
 export * from './text-field-common';
 
@@ -96,13 +94,6 @@ export class TextField extends TextFieldBase {
 
 		this._setInputType(inputType);
 	}
-
-	[whiteSpaceProperty.getDefault](): CoreTypes.WhiteSpaceType {
-		return 'nowrap';
-	}
-	[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
-		// Don't change it otherwise TextField will go to multiline mode.
-	}
 }
 
 TextField.prototype._isSingleLine = true;
diff --git a/packages/core/ui/text-field/index.ios.ts b/packages/core/ui/text-field/index.ios.ts
@@ -1,5 +1,5 @@
 import { TextFieldBase, secureProperty } from './text-field-common';
-import { textProperty } from '../text-base';
+import { textOverflowProperty, textProperty, whiteSpaceProperty } from '../text-base';
 import { hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base';
 import { CoreTypes } from '../../core-types';
 import { Color } from '../../color';
@@ -317,4 +317,43 @@ export class TextField extends TextFieldBase {
 	[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
 		// Padding is realized via UITextFieldImpl.textRectForBounds method
 	}
+
+	[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
+		this.adjustLineBreak();
+	}
+
+	[textOverflowProperty.setNative](value: CoreTypes.TextOverflowType) {
+		this.adjustLineBreak();
+	}
+
+	private adjustLineBreak() {
+		let paragraphStyle: NSMutableParagraphStyle;
+
+		switch (this.whiteSpace) {
+			case 'nowrap':
+				switch (this.textOverflow) {
+					case 'clip':
+						paragraphStyle = NSMutableParagraphStyle.new();
+						paragraphStyle.lineBreakMode = NSLineBreakMode.ByClipping;
+						break;
+					default:
+						// ellipsis
+						paragraphStyle = NSMutableParagraphStyle.new();
+						paragraphStyle.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
+						break;
+				}
+				break;
+			case 'wrap':
+				paragraphStyle = NSMutableParagraphStyle.new();
+				paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
+				break;
+		}
+
+		if (paragraphStyle) {
+			let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text || '');
+			attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));
+
+			this.nativeViewProtected.attributedText = attributedString;
+		}
+	}
 }

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ export namespace CoreTypes {`
`91`	`91`	`export const lowercase = 'lowercase';`
`92`	`92`	`}`
`93`	`93`
`94`		`- export type WhiteSpaceType = 'normal' \| 'nowrap' \| CSSWideKeywords;`
	`94`	`+ export type WhiteSpaceType = 'normal' \| 'nowrap' \| 'wrap' \| CSSWideKeywords;`
`95`	`95`	`export namespace WhiteSpace {`
`96`	`96`	`export const normal = 'normal';`
`97`	`97`	`export const nowrap = 'nowrap';`