bug(`<section-list>`): items not rendering correctly in very specific scenario

This is a pretty edge case bug, causing the section list to not render when preceded by 3 leading empty `<section-title<`/`<item>`. It's unclear at this point if the issue is in Hyperview codebase, or with the React Native `SectionList` component.

<table>
  <thead>
    <tr>
      <th>Markup</th>
      <th>UI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <pre>
          <code class="language-xml">
            &lt;doc xmlns="https://hyperview.org/hyperview"&gt;
              &lt;screen&gt;
                &lt;styles&gt;
                  &lt;style id="body" flex="1"/&gt;
                  &lt;style id="list" backgroundColor="lightgray" marginVertical="60" /&gt;
                &lt;/styles&gt;
                &lt;body style="body"&gt;
                  &lt;section-list style="list"&gt;
                    &lt;section-title/&gt;
                    &lt;item key="a"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="b"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="c"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="d"&gt;&lt;text&gt;Foo&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="e"&gt;&lt;text&gt;Bar&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="f"&gt;&lt;text&gt;Baz&lt;/text&gt;&lt;/item&gt;
                  &lt;/section-list&gt;
                &lt;/body&gt;
              &lt;/screen&gt;
            &lt;/doc&gt;
          </code>
        </pre>
      </td>
      <td>
        <img width="1206" height="2622" alt="Image" src="https://github.com/user-attachments/assets/e857e863-94eb-4a46-979b-0322bf6b7d6c" />
      </td>
    </tr>
    <tr>
      <td>
        Change: added a <strong><code>&lt;text/&gt;</code></strong> element within the first <strong><code>&lt;section-title/&gt;</code></strong>
        <pre>
          <code class="language-xml">
            &lt;doc xmlns="https://hyperview.org/hyperview"&gt;
              &lt;screen&gt;
                &lt;styles&gt;
                  &lt;style id="body" flex="1"/&gt;
                  &lt;style id="list" backgroundColor="lightgray" marginVertical="60" /&gt;
                &lt;/styles&gt;
                &lt;body style="body"&gt;
                  &lt;section-list style="list"&gt;
                    &lt;section-title&gt;&lt;text/&gt;&lt;/section-title&gt;
                    &lt;item key="a"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="b"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="c"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="d"&gt;&lt;text&gt;Foo&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="e"&gt;&lt;text&gt;Bar&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="f"&gt;&lt;text&gt;Baz&lt;/text&gt;&lt;/item&gt;
                  &lt;/section-list&gt;
                &lt;/body&gt;
              &lt;/screen&gt;
            &lt;/doc&gt;
          </code>
        </pre>
      </td>
      <td>
        <img width="1206" height="2622" alt="Image" src="https://github.com/user-attachments/assets/60a95856-36ae-4a2d-b6ae-6a11f6a67d21" />
      </td>
    </tr>
    <tr>
      <td>
        Change: added a <strong><code>&lt;text/&gt;</code></strong> element within the first <strong><code>&lt;item/&gt;</code></strong>
        <pre>
          <code class="language-xml">
            &lt;doc xmlns="https://hyperview.org/hyperview"&gt;
              &lt;screen&gt;
                &lt;styles&gt;
                  &lt;style id="body" flex="1"/&gt;
                  &lt;style id="list" backgroundColor="lightgray" marginVertical="60" /&gt;
                &lt;/styles&gt;
                &lt;body style="body"&gt;
                  &lt;section-list style="list"&gt;
                    &lt;section-title/&gt;
                    &lt;item key="a"&gt;&lt;text/&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="b"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="c"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="d"&gt;&lt;text&gt;Foo&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="e"&gt;&lt;text&gt;Bar&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="f"&gt;&lt;text&gt;Baz&lt;/text&gt;&lt;/item&gt;
                  &lt;/section-list&gt;
                &lt;/body&gt;
              &lt;/screen&gt;
            &lt;/doc&gt;
          </code>
        </pre>
      </td>
      <td>
        <img width="1206" height="2622" alt="Image" src="https://github.com/user-attachments/assets/60a95856-36ae-4a2d-b6ae-6a11f6a67d21" />
      </td>
    </tr>
    <tr>
      <td>
          Change: removed the last empty <strong><code>&lt;section-title/&gt;</code></strong> / <strong><code>&lt;item/&gt;</code></strong> combo
        <pre>
          <code class="language-xml">
            &lt;doc xmlns="https://hyperview.org/hyperview"&gt;
              &lt;screen&gt;
                &lt;styles&gt;
                  &lt;style id="body" flex="1"/&gt;
                  &lt;style id="list" backgroundColor="lightgray" marginVertical="60" /&gt;
                &lt;/styles&gt;
                &lt;body style="body"&gt;
                  &lt;section-list style="list"&gt;
                    &lt;section-title/&gt;
                    &lt;item key="a"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="b"&gt;&lt;/item&gt;
                    &lt;section-title/&gt;
                    &lt;item key="d"&gt;&lt;text&gt;Foo&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="e"&gt;&lt;text&gt;Bar&lt;/text&gt;&lt;/item&gt;
                    &lt;item key="f"&gt;&lt;text&gt;Baz&lt;/text&gt;&lt;/item&gt;
                  &lt;/section-list&gt;
                &lt;/body&gt;
              &lt;/screen&gt;
            &lt;/doc&gt;
          </code>
        </pre>
      </td>
      <td>
        <img width="1206" height="2622" alt="Image" src="https://github.com/user-attachments/assets/60a95856-36ae-4a2d-b6ae-6a11f6a67d21" />
      </td>
    </tr>
  </tbody>
</table>


Markup	UI
<doc xmlns="https://hyperview.org/hyperview"> <screen> <styles> <style id="body" flex="1"/> <style id="list" backgroundColor="lightgray" marginVertical="60" /> </styles> <body style="body"> <section-list style="list"> <section-title/> <item key="a"></item> <section-title/> <item key="b"></item> <section-title/> <item key="c"></item> <section-title/> <item key="d"><text>Foo</text></item> <item key="e"><text>Bar</text></item> <item key="f"><text>Baz</text></item> </section-list> </body> </screen> </doc>
Change: added a `<text/>` element within the first `<section-title/>` <doc xmlns="https://hyperview.org/hyperview"> <screen> <styles> <style id="body" flex="1"/> <style id="list" backgroundColor="lightgray" marginVertical="60" /> </styles> <body style="body"> <section-list style="list"> <section-title><text/></section-title> <item key="a"></item> <section-title/> <item key="b"></item> <section-title/> <item key="c"></item> <section-title/> <item key="d"><text>Foo</text></item> <item key="e"><text>Bar</text></item> <item key="f"><text>Baz</text></item> </section-list> </body> </screen> </doc>
Change: added a `<text/>` element within the first `<item/>` <doc xmlns="https://hyperview.org/hyperview"> <screen> <styles> <style id="body" flex="1"/> <style id="list" backgroundColor="lightgray" marginVertical="60" /> </styles> <body style="body"> <section-list style="list"> <section-title/> <item key="a"><text/></item> <section-title/> <item key="b"></item> <section-title/> <item key="c"></item> <section-title/> <item key="d"><text>Foo</text></item> <item key="e"><text>Bar</text></item> <item key="f"><text>Baz</text></item> </section-list> </body> </screen> </doc>
Change: removed the last empty `<section-title/>` / `<item/>` combo `<doc xmlns="https://hyperview.org/hyperview"> <screen> <styles> <style id="body" flex="1"/> <style id="list" backgroundColor="lightgray" marginVertical="60" /> </styles> <body style="body"> <section-list style="list"> <section-title/> <item key="a"></item> <section-title/> <item key="b"></item> <section-title/> <item key="d"><text>Foo</text></item> <item key="e"><text>Bar</text></item> <item key="f"><text>Baz</text></item> </section-list> </body> </screen> </doc>`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

bug(`<section-list>`): items not rendering correctly in very specific scenario #1248

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug(<section-list>): items not rendering correctly in very specific scenario #1248

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

bug(`<section-list>`): items not rendering correctly in very specific scenario #1248