Dailpad is launching by default

[deshneni-akhil]

Describe the bug; what happened? I have integrated CallComposite into my application where I will provide the adapter and options fields below. The call composite upon successfully connecting to a call queue I see a DTMF keypad screen by default the only option to disable this keypad is to select more and disable the keypad option.

What are the steps to reproduce the issue?

<CallComposite
          adapter={adapter}
          formFactor="desktop"
          options={{
            callControls: {
              cameraButton: useLocalVideo,
              screenShareButton: useLocalVideo,
              moreButton: true,
              peopleButton: true,
              displayType: "compact",
              // dtmfDialerButton: false,
            },
            galleryOptions: {layout: 'speaker'},
            localVideoTile: !useLocalVideo ? false : { position: "floating" },
          }}

setAdapter(
  await createAzureCommunicationCallAdapter({
    displayName: displayName ?? "",
    userId: callAdapterArgs.userId,
    credential: callAdapterArgs.credential,
    targetCallees: callAdapterArgs.targetCallees,
    options: callAdapterArgs.options,
  })
);

adapter?.startCall(callAdapterArgs.targetCallees, {
  audioOptions: { muted: false }
});

What behavior did you expect?

Current Behaviour upon connecting to the call:

The expected behavior is to see the speaker instead of the keypad.

In what environment did you see the issue?

Node Version: v20.10.0 NPM Version: 10.2.3 React Version: 18.2.0

• @azure/communication-react npm package version (if applicable): [e.g. 1.3.0] @azure/communication-react: 1.15.0

• @azure/communication-calling npm package version (if applicable): [e.g. 1.5.4-beta.1] @azure/communication-calling: 1.23.1

• @azure/communication-chat npm package version (if applicable): [e.g. 1.2.2]

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC] OS: Windows 10

• Browser: [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox] Browser: Microsoft Edge

• Browser Version: 124.0.2478.67

Is there any additional information?

[alkwa-msft]

Thanks for sharing this Github issue. We will look at this with the team and get back to you with a response soon.

[dmceachernmsft]

HI @deshneni-akhil Thanks for filing the issue! The expected behavior when joining to a Teams Call Queue or Auto Attendant is to show the DTMF dialer, however the Dialer should be dismissing when the agent connects to the customer. So we do have a bug here to fix on our side. Will keep you appraised of its progress!

[deshneni-akhil]

Thanks for the update @dmceachernmsft

[dmceachernmsft]

@deshneni-akhil So we made a fix that should be in the next release that we are starting next week so expect it to be out the week after at the latest!

The fix involves a new API that will allow you to disable to auto pop up of the dtmf dialer when making a call in supported scenarios:

• Calling a teams voice application
• PSTN (beta only)

you will be able to use the new API on the CallCompositeOptions to disable it like so:

 const options: CallCompositeOptions = useMemo(
    () => ({
      callControls: {
        screenShareButton: shouldHideScreenShare ? false : undefined,
      },
      disableAutoShowDtmfDialer: true // <-- this is the new disable auto show DTMF dialer option
    }),
    [shouldHideScreenShare]
  );

Then you pass in the options object like normal

    <CallComposite
      adapter={adapter}
      fluentTheme={currentTheme.theme}
      rtl={currentRtl}
      callInvitationUrl={callInvitationUrl}
      formFactor={isMobileSession ? 'mobile' : 'desktop'}
      options={options}
    />

I will post here again when the release is out so you know that it is ready to go. Thanks for finding the issue!

[deshneni-akhil]

@dmceachernmsft Thanks for fixing this issue and providing the props signature. If possible, can you let me know the ETA for the next release.

[dmceachernmsft]

@deshneni-akhil Apologies for not clarifying! the release was 1.16.0 so you should be able to use the new API now!

[deshneni-akhil]

@dmceachernmsft I have updated to the new version, and have disabled the DtmfDailer upon call being connected.

Thanks for the assistance, you can close the issue.

[dmceachernmsft]

Excellent glad we could help here! if there any more related questions please re-open the issue!