React: Messagebar `inner-end` slot requires `inner-start` slot to render (and crashes in the inverse case)

[ifabijanovic]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch framework7-react@9.1.2 for the project I'm working on.

In framework7-react 9.1.2, the Messagebar renders the end ToolbarPane behind this condition (messagebar.js line 183):

(sendLink && sendLink.length > 0 || slotsSendLink || slotsInnerStart && slotsInnerEnd.length > 0) &&
  React.createElement(ToolbarPane, null, ..., slotsInnerEnd)

The last clause checks slotsInnerStart where it should check slotsInnerEnd. This causes two problems:

1. inner-end content is silently dropped when no inner-start slot is used — a Messagebar with only a send button in slot="inner-end" renders no button at all.
2. TypeError: Cannot read properties of undefined (reading 'length') when inner-start is used without inner-end — slotsInnerStart is truthy, so slotsInnerEnd.length dereferences undefined and the component crashes on render.

Minimal reproduction

// Case 1: send button never renders
<Messagebar placeholder="Message">
  <Link slot="inner-end" iconMaterial="send" onClick={send} />
</Messagebar>

// Case 2: crashes on render
<Messagebar placeholder="Message">
  <Link slot="inner-start" iconMaterial="attach_file" onClick={attach} />
</Messagebar>

Both worked in framework7-react 8.x, where the inner slots rendered unconditionally inside .toolbar-inner.

Expected behavior

The end pane should be gated on its own content:

(sendLink && sendLink.length > 0 || slotsSendLink || slotsInnerEnd && slotsInnerEnd.length > 0)

We're currently shipping exactly that one-line change via patch-package and can confirm it fixes both cases.

diff --git a/node_modules/framework7-react/components/messagebar.js b/node_modules/framework7-react/components/messagebar.js
index 4851562..f2e884e 100644
--- a/node_modules/framework7-react/components/messagebar.js
+++ b/node_modules/framework7-react/components/messagebar.js
@@ -180,7 +180,7 @@ const Messagebar = props => {
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur
-  }, valueProps)), slotsAfterArea), (sendLink && sendLink.length > 0 || slotsSendLink || slotsInnerStart && slotsInnerEnd.length > 0) && /*#__PURE__*/React.createElement(ToolbarPane, null, (sendLink && sendLink.length > 0 || slotsSendLink) && /*#__PURE__*/React.createElement(Link, {
+  }, valueProps)), slotsAfterArea), (sendLink && sendLink.length > 0 || slotsSendLink || slotsInnerEnd && slotsInnerEnd.length > 0) && /*#__PURE__*/React.createElement(ToolbarPane, null, (sendLink && sendLink.length > 0 || slotsSendLink) && /*#__PURE__*/React.createElement(Link, {
     onClick: onClick
   }, slotsSendLink || sendLink), slotsInnerEnd), innerEndEls), slotsAfterInner, messagebarSheetEl);
 };

This issue body was partially generated by patch-package.