Split buttons for Microphone/Camera open menu instead of toggling on touch devices in MicrophoneButton /CameraButton

[emavitta]

Describe the bug; what happened?

On touch devices, tapping the primary area of the Microphone or Camera split buttons (the left part with the icon and label) opens the device selection dropdown menu instead of toggling mic/camera on/off. Only the behavior on touch devices is affected — mouse clicks work correctly.

The root cause is that MicrophoneButton and CameraButton don't pass toggle={true} to the underlying Fluent UI DefaultButton when rendered as split buttons.

Fluent UI's BaseButton._onSplitButtonPrimaryClick checks:

var singleTouchTarget = _this._processingTouch && !_this.props.toggle;

Since toggle is never set, on touch devices (_processingTouch = true) the button opens the menu instead of calling onClick.

The fix would be to add toggle: true when rendering ControlBarButton in MicrophoneButton.js and CameraButton.js (when split is enabled). Fluent UI's own comment confirms this is the intended API: "toggle split buttons need two separate targets, even for touch".

What are the steps to reproduce the issue?

1. Render a CallComposite with default options (device selection menu enabled)
2. Open on a touch device (Android WebView, or Chrome DevTools with touch emulation enabled)
3. Tap the Microphone or Camera button's primary area (not the chevron arrow)
4. The device selection dropdown opens instead of toggling

What behavior did you expect?

Tapping the primary area should toggle mic/camera on/off. Tapping the chevron (˅) should open the device selection dropdown.

If applicable, provide screenshots:

N/A

In what environment did you see the issue?

• @azure/communication-react npm package version: 1.31.0

• @azure/communication-calling npm package version: 1.40.1

• @azure/communication-chat npm package version: N/A

• OS & Device: Android 13 on Mago Display Pro (Android WebView), also reproducible via Chrome DevTools touch emulation on any OS

• Browser: Android WebView / Chrome

• Browser Version: N/A

Is there any additional information?

The relevant code path in Fluent UI BaseButton.js:

// _onPointerDown: sets _processingTouch = true when pointerType === 'touch'

_this._onSplitButtonPrimaryClick = function (ev) {
    // toggle split buttons need two separate targets, even for touch
    var singleTouchTarget = _this._processingTouch && !_this.props.toggle;
    if (!singleTouchTarget && _this.props.onClick) {
        _this.props.onClick(ev);      // ← expected: toggle
    } else if (singleTouchTarget) {
        _this._onMenuClick(ev);       // ← actual: opens menu
    }
};

The fix in MicrophoneButton.js (and similarly CameraButton.js) would be adding toggle: true:

React.createElement(ControlBarButton, Object.assign({}, props, {
    toggle: true,  // ← add this
    onClick: onToggleClick,
    split: isSplit,
    // ...
}))