Azure / Azure/communication-ui-library
Split buttons for Microphone/Camera open menu instead of toggling on touch devices in MicrophoneButton /CameraButton
- Dominant language
- TypeScript
- Stars
- 204
- Forks
- 84
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 4
Description
**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:
```js
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`:
```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`:
```js
React.createElement(ControlBarButton, Object.assign({}, props, {
toggle: true, // ← add this
onClick: onToggleClick,
split: isSplit,
// ...
}))
```
Contributor guide
Research direction
Start by inspecting MicrophoneButton.js and CameraButton.js, then trace how they render ControlBarButton. Reproduce the issue with Chrome DevTools touch emulation and verify that the primary area toggles while the chevron opens the device-selection menu. Done means both split buttons pass the required toggle behavior without changing mouse interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100