React <SBConversation> bug on re-connect

Sendbird Chat UIKit React
, ,
1

[Problem/Question]
// Detailed description of issue.

I’m using an inside an (ReactJS) to display a conversation and this all works correctly.

I’m disconnecting when the browser tab becomes hidden and reconnect when it comes back into focus - this is done to save on open concurrent connections.

Disconnecting and Reconnecting work fine, I see the messages flow in after reconnection and I see the “trying to connect” ui under the textinput. However, after reconnection the textfield remains “disabled” an I can not send additional message.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
// What version of the SDK are you using?
“react”: “^17.0.1”
“@sendbird/uikit-react”: “^3.6.0”

[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.

add this to your conversation component:

const globalStore = useSendbirdStateContext();
const getGroupChannel = sendbirdSelectors.getGetGroupChannel(globalStore);
const disconnect = sendbirdSelectors.getDisconnect(globalStore);
const connect = sendbirdSelectors.getConnect(globalStore);
//...
useLayoutEffect(() => {
    async function handleVisibilityChange() {
      try {
        if (document.visibilityState === 'hidden') {
          console.log('disconnect');
          disconnect()
            .then((res) => console.log(res))
            .catch((err) => console.log(err));
        }

        if (document.visibilityState === 'visible') {
          console.log('--Connection changed from hidden to visible');
          connect(token.userId, token.accessToken)
            .then( async (res) => {
              console.log(res) // <--- this works, reconnection is successful 
            })
            .catch((err) => console.log('err',err));
        }
      } catch (err) {
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [globalStore]);

[Frequency]
// How frequently is this issue occurring?
always

[Current impact]
// How is this currently impacting your implementation?
I can’t send messages.

Screenshot 2023-07-04 at 13.50.24
Screenshot 2023-07-04 at 13.50.242559×440 131 KB

2

Hello @amit

Welcome to the Sendbird Community!

Based on the code you provided, it seems that you are correctly disconnecting and reconnecting to the Sendbird server when the browser tab becomes hidden and visible again. However, you mentioned that after reconnection, the textfield remains disabled and you cannot send additional messages.

One possible reason for this issue is that the textfield’s disabled state is not being updated correctly after the reconnection. To troubleshoot this, you can check the following:

  1. Make sure that the textfield’s disabled state is being controlled by a state variable in your React component. Verify that the state variable is being updated correctly after the reconnection. You can use console.log or React DevTools to check the value of the disabled state variable.
  2. Check if there are any event listeners or other code that might be interfering with the textfield’s disabled state. For example, if there is an event listener that disables the textfield under certain conditions, make sure that it is not conflicting with the reconnection logic.
  3. Verify that the textfield’s disabled attribute is correctly bound to the disabled state variable. Double-check the code where the textfield is rendered and ensure that the disabled attribute is set based on the value of the disabled state variable.

Additionally you can test the same thing with our latest React UIKit version v3.6.3 : GitHub - sendbird/sendbird-uikit-react: Build chat in minutes with Sendbird UIKit open source code.

If this does not resolve the issue I would kindly request you to share a video recording of the issue.

3

hey @Chinmaya_Gupta, thanks, this is using YOUR textfield from the SDK, its the textfield inside YOUR <SBCobnersion> react component.
The workaround I found, which is kind of funky, is calling:

const sdk = sendbirdSelectors.getSdk(globalStore);
...
if (document.visibilityState === 'visible') {
  connect(token.userId, token.accessToken)
    .then(() => sdk.reconnect()) // <------ this..
    .catch((err) => console.log('err', err));
}

I really don’t know why it works…

4

@Chinmaya_Gupta this is with the sendbird React UIKIT … connection is successful but the SENDBIRD component does not update.