bug: StreamChat automatically opens into a conversation on Mobile

[FrenchMajesty]

Describe the bug

When I load up the inbox page of my app on mobile view, StreamChat automatically jumps into a conversation context. I often times have to expressly tap the "back" so that I can view a list of conversations.

The documentation shows there is a prop that can be used to control that, but it doesn't seem to be work.

To Reproduce

Steps to reproduce the behavior:

1. Go to a page with the Chat context
2. Observe how it will automatically open a thread

Expected behavior

I would expect that when that prop is to true, that my inbox would stay in the thread view rather than opening a random conversation. This behavior is very annoying when on mobile and hurts UX

Video recording
https://www.loom.com/share/62fd054cb8f04019ba7641cf8bb65ef3?sid=9ab29c33-b23c-4d4b-bdad-a4fe3656da1a

{
    "stream-chat": "^8.25.1",
    "stream-chat-react": "^11.13.1"
}

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version: 123

[MartinCupela]

Hey @FrenchMajesty, this is a problem of the documentation. I will add the following recommendation to the given prop description

The prop controls setting of the class str-chat-channel-list--open on the ChannelList root div. It is up to the integrator to decide, what styles should be assigned to this class to control the app layout. An example could be as follows:

@media screen and (min-width: 768px) {
  .str-chat-channel-list--open {
      width: 100%;
  }
  
  .str-chat-channel-list {
      position: fixed;
      z-index: 1;
      width: 0;
  }
}

Here, the list will take the whole width of the screen on small devices once the class str-chat-channel-list--open is assigned to the root div. Otherwise, the list is not visible as it has zero width.

[stream-ci-bot]

🎉 This issue has been resolved in version 11.18.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[FrenchMajesty]

@MartinCupela Do you have a reproducible example where I can see this working as expected?

The problem I perceive doesn't seem to come from CSS but rather Javascript. The class that has open gets removed from the channel-list. See screen:

It automatically dismisses after a certain amount of time and value of navOpen is set to false despite me not calling openMobileNav or closeMobileNav at any point.

UPDATE:
I was able to confirm what I observed by gorking the ChatProvider. The package will choose to focus on a channel and cause the navigation to close.

[FrenchMajesty]

Update:

For those of you who have a similar issue to me, the solution is this prop:
https://getstream.io/chat/docs/sdk/react/components/core-components/channel_list/#setactivechannelonmount

      <ChannelList
        List={List}
        Preview={Preview}
        setActiveChannelOnMount={false} <----- THIS
      />