SSR: DBNavigationItem always renders with Submenu

[milan-w]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

When using server side rendering (e.g. next.js) the following code

<DBNavigation>
      <DBNavigationItem>
          <a href="/">Homepage</a>
      </DBNavigationItem>
</DBNavigation>

should render a link inside of an <li> item.

Instead it renders the link inside a element and an empty subnavigation nav.

I suspect this is because in packages/components/src/components/navigation-item/navigation-item.lite.tsx#32 the prop "hasSubNavigation" is set to true by default and only updated onMount. Additionally updateSubNavigationState starts with a check for the existence of "document", which doesn't exist on the server.

This should be corrected by the client side hydration, but because the server rendering injects a subnavigation (with id), the client side updateSubNavigationState checks find a subNavigationSlot and also renders a subnavigation.

Expected Behaviour

DBNavigationItem should not render a subnavigation when none exists 😀

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[mfranzke]

see also #4018