Leave button is not working in upgraded meeting sdk app in NextJs

I am using new meeting sdk type app but somehow leave button doesnt work no matter how many times i click the button. I am passing leaveurl correctly as far as i can see. Here is my code:

import { useEffect } from 'react';
import { apiReq } from '../redux/methods/RequestMethods';
import { useRouter } from 'next/router';
import { authonticateAccess } from '../helpers/accessHelper';
import { SetMeetingLoader } from '../redux/actions/sessionAction';
import { useDispatch } from 'react-redux';
import Head from 'next/head';

//push
const Meeting = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  console.log(router.query)
  const {meetingNumber, password, name, leaveUrl, endTime} = {meetingNumber:'86347673306', password:'clapingo', name:'learner',leaveUrl:'http://localhost:3000/'};
  

  useEffect(()=>{
    console.log("USE EFFECT", meetingNumber, password, name, leaveUrl)
    const connToZoom = async () => {
      await joinZoomMeeting(meetingNumber, password, name, leaveUrl, endTime);
      SetMeetingLoader(false, dispatch);
    };
    if(window!== undefined){
      if(window.fcWidget) window.fcWidget.hide();
    }
    if(meetingNumber && password && name && leaveUrl) {
      console.log("mylog loading")
      SetMeetingLoader(true, dispatch);
      connToZoom();
    }
  },[]);
  
  const  joinZoomMeeting = async (meetingNumber, password, name, leaveUrl, endTime) => {
    console.log("JOIN ZOOM MEET")
    const apiKeyResponse = await apiReq(`${process.env.BASE_URL}/api/images`, "GET");
    console.log(apiKeyResponse, "APIKEY")
    const loadZoom = async () => {
      const loadedZoom = await import('@zoomus/websdk');
      return loadedZoom;
    }

    const loadedZoom = await loadZoom();
    
    const ZoomMtg = window.ZoomMtg;

    ZoomMtg.setZoomJSLib('https://source.zoom.us/2.11.0/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    const meetingConfig = {
      sdkKey:"lAzXXLSJQyKbYI1xZwqQOw",
      meetingNumber: meetingNumber,
      userName: name? name : "learner",
      passWord: password,
      leaveUrl,
      role: 0,
      tk: '',
    };
    // console.log(meetingConfig)
    const signatureCall = await apiReq("https://dev.clapingo.com/api/session/zoomSignature", "POST", {
      meetingNumber: meetingNumber,
      role: 0
    });
    const signature = signatureCall.data.signature

    console.log(signature, "SIG")
    console.log("leaveURL", meetingConfig.leaveUrl)
    ZoomMtg.init({
      leaveUrl: 'http://localhost:3000',
      // isSupportAV: true,
      success: () => {
        console.log("SIGNATURE SUCCESS")
        console.log({
          signature: signature,
          meetingNumber: meetingConfig.meetingNumber,
          userName:  meetingConfig.userName,
          sdkKey: meetingConfig.sdkKey,
          userEmail: '',
          passWord: meetingConfig.passWord,
        });
        ZoomMtg.join({
          signature: signature,
          meetingNumber: meetingConfig.meetingNumber,
          userName:  meetingConfig.userName,
          sdkKey: meetingConfig.sdkKey,
          userEmail: '',
          passWord: meetingConfig.passWord,
          success: (success) => {
            console.log(success);
          },
          error: (error) => {
            console.log(error);
          },
        });
      },
      error: (error) => {
        console.log("SIGNATURE ERROR")
        console.log(error);
      },
    });
    return loadedZoom;
  }
  return (
    <>
    <Head>
    <title>Meeting</title>
    <link
           type="text/css"
           rel="stylesheet"
           href="https://source.zoom.us/2.11.0/css/bootstrap.css"
         />
    <link
           type="text/css"
           rel="stylesheet"
           href="https://source.zoom.us/2.11.0/css/react-select.css"
         />
    </Head>
    <div>Loading Meeting...</div>
    </>
    );
}

export default authonticateAccess(Meeting);

does the optical reaction of the “leave” button work ?

  • cursor change
  • changing the color of the button area

Yes it seems so.
Here is the Video

you do not have a css/style problem, this seems to be a javascript problem

if you open the browser console (-> F12) do you see any errors when you click the button?

No, i did that in the above video aswell if you notice, my console was open when i was clicking

very strange - i have just testet

  • react example 2.11.0 with Firefox and Chrome (host & normal user)
  • js example CDN 2.11.0 with Firefox (normal user)

no problems with the “Leave” button, always the “Leave Meeting” button appears

for me the click event of the “leave” button looks like this

Its following for me

in the zoom example there are 5 event listener for the button - the actual work probably happens at the second from the top

in your programming there are 12 event listener, perhaps one of the extra 7 do not pass the event

  • 3 x extra events (react)
  • 2 x gtm (Google Tag Manager)
  • 2 x js (???)

So should try after disabling those events? Google tag manager i can disable, others i need to figure

I have seen in your recorded video you use shadow-dom

i have not used shadow-dom yet - but here it says that the event bubbling is modified

Not sure about it, I have only followed zoom docs and react sample app example. Is there anyway to work around it or fix it if this is the issue?

Another thing to note is there is another leave button that comes right after you join the meeting as its shown in this image. This button works fine

which version of react are you using, on the example version there is

  • v16.13.0 (-> react-dom.development.js)

have a look → not clickable ‘leave’ button

→ react 17 not compatible