Inline <a> tag taking full horizontal width on Web.

[parasharrajat]

Decision Table

• My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

Description

In the Older version of RNRH the <code> element use to behave inline but now. it takes the full width of the screen.

I think this change has affected every tag. For example, if you add a link element, it is clickable from empty space on the web.

In the above image click the far right and it goes to that link on the web.

WEB

Inline Tag expands to the full width of the parent.

React Native Information

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
    Memory: 363.11 MB / 15.47 GB
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.npm-globals/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.2, 29.0.3, 30.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 4.13.1 => 4.13.1 
    react: ^17.0.2 => 17.0.2 
    react-native: 0.64.1 => 0.64.1 
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

V6.0.0-beta.8

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

https://snack.expo.dev/hGHmxvgL7

Additional Notes

I compared the older alpha version of the V6 to the Beta version. There is only one difference that there used to be a wrapping node in DOM around the main tag node but now it's not there. So Body tags flex:column styling is causing it to expand to full-width.

The structure is like this

 <html-node>
   <body-node>
     <code-node>

previously

 <html-node>
   <body-node>
     <wrapper-node>
       <code-node>

[jsamr]

@parasharrajat Interesting case; react-native-web seems to set align-items to stretch which causes the spanning. If we force it to flex-start, the intended behavior is reinstated. You are right about the alluded change in behavior :

react-native-render-html/packages/render-html/src/TPhrasingRenderer.ts

Lines 36 to 42 in 02aa624

	// When a TPhrasing node is anonymous and has only one child, its
	// rendering amounts to rendering its only child.
	if (props.tnode.tagName == null && props.tnode.children.length <= 1) {
	return React.createElement(TNodeChildrenRenderer, {
	tnode: props.tnode
	});
	}

This change was introduced to lighten the render tree, with the additional benefit of leveraging a couple of bugs with React Native nested Text. I still have to think more deeply about the issue before providing a fix which might introduce unintended behaviors. In the meantime, you could try something along defaultViewProps={{ style: { alignItems: "flex-start" } }} for Web and see how it behaves.

[parasharrajat]

Thanks @jsamr , I will try that.

[parasharrajat]

This seems to work fine. Please let me know if you have plans to fix this issue in the core library. I can track this issue and upgrade the lib as soon as it's done.

[jsamr]

@parasharrajat Sure, I'll let you know!

[parasharrajat]

Another side-effect of that change. Check out the first Inline code block behaving like a code block on Web.

[jsamr]

@parasharrajat is that an effect of alignItems or of the removal of the wrapper?

[parasharrajat]

I think Removal of the wrapper. Inside flex-container inline node is behaving block. I added Text inside the TDefaultRenderer which fixed it.

[jsamr]

@parasharrajat If you're willing to provide a reproduction for this second issue, I'd be happy to investigate.

As per your first issue, I think a better solution would be to only target the body tag:

See https://snack.expo.dev/@jsamr/rnrh-web-bug

Otherwise, unintended side-effect might proof hard to foresee.

[parasharrajat]

@jsamr Here you go https://snack.expo.dev/@parasaharrajat/rnrh-web-bug.

There is another issue that I am facing. Expensify/App#4733. The same code was working previously.

[parasharrajat]

For now, I suggest that you revert those changes as it causing a lot of issues and then carefully migrate. I would like to keep the latest v6 due to stability and some good feature.

[jsamr]

@parasharrajat I am probably going to provide a 6.0.6-beta.0 with a prop to disable this behavior so that you can quickly provide a "fix", and after that take some time to investigate further the implications of that change. I can't revert the behavior without introducing a breaking change and potentially disrupting many consumers. I must stress that many bugs exist with nested text in React Native and one main reason for this change was to mitigate these whenever possible. I'm pretty busy right now, so expect a beta before the end of the week. If you are willing to, you can also provide a PR (the name of the prop should be disableTPhrasingNodesReduction) and I'll take 5 minutes to merge and publish.

[parasharrajat]

Thanks for prompt action @jsamr. It sounds great. I will look into the codebase to understand it and try to put up a PR to disable this behaviour behind the flag. Could you please link me to the PR where you made this change or the commit? It would help me quickly get familiar with the main area.

[jsamr]

Here it is: dad450d
If you have any "lively" question, ping me in our Discord!

PS: a better name for the prop: preserveAnonymousTPhrasingNodes and a description:

/**
* When `true`,  preserve anonymous {@link TPhrasing} nodes parents of lonely {@link TText} nodes at render time instead of bypassing them and rendering their child directly.
*
* @defaultValue `false`
*/

[jsamr]

Here you go https://snack.expo.dev/@parasaharrajat/rnrh-web-bug.

@parasharrajat Not sure what is the expected behavior versus what is observed? I can't find anything surprising in this snippet (Web), what did I miss?

[parasharrajat]

Previously, the second code block used to wrap same as first code block where border and background also wrap with text. It used to behave inline but now it is block. Text is wrapping but border and background is surrounding whole text and its not breaking on each line.

[jsamr]

@parasharrajat Got you, I tried your example with alpha-20:

[jsamr]

@parasharrajat You can now set bypassAnonymousTPhrasingNodes prop to false in version 6.1.0-alpha.0; hope that will help! Let me know.

[parasharrajat]

Thanks, I will take a look.