zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-01 10:07:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Layout of nested Text elements

Browse Source 
Remove the 'dir=auto' attribute from nested Text elements as this can cause
browsers to produce broken text layouts.

Fix #1714
This commit is contained in:
Nicolas Gallagher
2020-08-25 11:00:27 -07:00
parent a31c4c65d0
commit 9a0acc5464
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
-1
View File
@@ -22,7 +22,6 @@ exports[`components/Text nested 1`] = `
<span <span
class="css-text-901oao css-textHasAncestor-16my406" class="css-text-901oao css-textHasAncestor-16my406"
data-testid="child" data-testid="child"
dir="auto"
/> />
</div> </div>
`; `;
packages/react-native-web/src/exports/Text/index.js
Vendored
+5 -2
View File
@@ -153,8 +153,11 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
const component = hasTextAncestor ? 'span' : 'div'; const component = hasTextAncestor ? 'span' : 'div';
const supportedProps = pickProps(props); const supportedProps = pickProps(props);
supportedProps.classList = classList; supportedProps.classList = classList;
// 'auto' by default allows browsers to infer writing direction supportedProps.dir = dir;
supportedProps.dir = dir !== undefined ? dir : 'auto'; // 'auto' by default allows browsers to infer writing direction (root elements only)
if (!hasTextAncestor) {
supportedProps.dir = dir != null ? dir : 'auto';
}
supportedProps.onClick = handleClick; supportedProps.onClick = handleClick;
supportedProps.ref = setRef; supportedProps.ref = setRef;
supportedProps.style = style; supportedProps.style = style;