diff --git a/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json b/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json new file mode 100644 index 00000000000000..5178e734fe2a12 --- /dev/null +++ b/change/@fluentui-react-5a84fff9-977e-458d-94a0-c8e5bd1c8930.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: checkable splitbutton and split menuitem have two separate touch targets", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx index f066368adfd030..94d0917462d5d7 100644 --- a/packages/react/src/components/Button/BaseButton.tsx +++ b/packages/react/src/components/Button/BaseButton.tsx @@ -678,9 +678,12 @@ export class BaseButton extends React.Component { expect(getAllByRole('button')[0].getAttribute('aria-expanded')).toEqual('true'); }); + it('Touch Start on primary button of toggle SplitButton fires click event', () => { + const clickSpy = jest.fn(); + const { getAllByRole } = render( + , + ); + const primaryButton = getAllByRole('button')[1]; + + // in a normal scenario, when we do a touchstart we would also cause a + // click event to fire. This doesn't happen in the simulator so we're + // manually adding this in. + fireEvent.touchStart(primaryButton); + userEvent.click(primaryButton); + expect(clickSpy).toHaveBeenCalled(); + }); + it('If menu trigger is disabled, pressing down does not trigger menu', () => { const { getAllByRole } = render(