Typing Indicator Event for Room Admin Not Visible to Other Users Until Refresh or Relogin.

[dhaval-t-simform]

Description: I am encountering an issue when initiating a new chat room. The problem is that when we create a new chat room, the room admin's typing indicator event is successfully dispatched from their account/device(which I can check in logs inside the typing observer), but this event is not received or captured in other users system/account(neither the api call is seen in the network tab nor event can be caught in the logs inside the typing observer) in the room. Consequently, the typing indicator for the admin is not visible to other users, while typing indicators from other users are displayed to everyone in the chat room. But if we refresh or relogin then the typing indicator works as expected even for the admin.

Steps to Reproduce: Initialize a new chat room. Create a new chat room and the user who creates the room is the group admin with power_level = 100. Have the admin start typing a message. Observe that the typing indicator is not visible to other users in the room.

Expected Behavior: When the room admin starts typing, their typing indicator event should be visible to all other users in the room without refresh or relogin.

Actual Behavior: The typing indicator event for the room admin is not visible to other users in the chat room until we refresh or relognin.

Environment: matrix-js-sdk version: [29.1.0] React version: [18.2.0] Node.js version: [18.16.0] Operating System: [Ubuntu 20.04]

Code:

client.on("RoomMember.typing", (event, member) => {
      const customEvent1 = new CustomEvent("MRoomMember.typing", {
        detail: {
          event,
          member
        }
      })
      document.dispatchEvent(customEvent1)
    })

useEffect(() => {
    if (id) {
      roomId.current = id
    }
    if (client) {
      if (!isEventInit) {
        document.addEventListener("MRoomMember.typing", handleTyping)
        setIsEventInit(true)
      }
    }
  }, [client, id])

const handleTyping = (e) => {
    const { event, member } = e.detail
    if (roomId.current === member.roomId) {
      const user = matrixUsers.find(
        (data) => data.matrix_user_id === member.userId
      )
      onTyping({
        image: user?.avatar,
        name: member.rawDisplayName,
        userId: member.userId,
        status: member.typing
      })
    }
  }

If more information is needed I can provide it.

[nikkuAg]

Is this issue still open? I would like to work on this

[dhaval-t-simform]

@nikkuAg Yes, still open. Any updates on this?

[nikkuAg]

Okay, I will start working on it.

[nikkuAg]

Hey @dhaval-t-simform , I'm in the process of setting up the Matrix JS SDK. Could you guide me on running the SDK in a browser for testing and development purposes?

[dhaval-t-simform]

@nikkuAg You can refer to app.element.io or app.cinny.in. And you can check https://github.com/cinnyapp/cinny this github repo of cinny. It is opensource and you can download and have a look.