diff --git a/change/@fluentui-react-carousel-5e2a3d84-3b48-4b8f-b15a-96d16eeaa8b9.json b/change/@fluentui-react-carousel-5e2a3d84-3b48-4b8f-b15a-96d16eeaa8b9.json new file mode 100644 index 0000000000000..c81bb73fbb0f0 --- /dev/null +++ b/change/@fluentui-react-carousel-5e2a3d84-3b48-4b8f-b15a-96d16eeaa8b9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Ensure pointer events do not block future focus index changes", + "packageName": "@fluentui/react-carousel", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts b/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts index c91ea2a941d57..5dbf3eb3dc56d 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts +++ b/packages/react-components/react-carousel/library/src/components/CarouselCard/useCarouselCard.ts @@ -73,24 +73,28 @@ export const useCarouselCard_unstable = ( containerRef?.current?.scrollTo(0, 0); selectPageByElement(e, e.currentTarget, false); } + // Mouse focus event has been consumed + isMouseEvent.current = false; }, [selectPageByElement, containerRef], ); - const handleMouseDown = (e: React.MouseEvent) => { + const handlePointerDown = (e: React.MouseEvent) => { if (!e.defaultPrevented) { isMouseEvent.current = true; } }; - const handleMouseUp = (e: React.MouseEvent) => { + + const handlePointerUp = (e: React.MouseEvent) => { if (!e.defaultPrevented) { isMouseEvent.current = false; } }; - const onFocus = mergeCallbacks(props.onFocus, handleFocus); - const onMouseUp = mergeCallbacks(props.onMouseUp, handleMouseUp); - const onMouseDown = mergeCallbacks(props.onMouseDown, handleMouseDown); + const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus); + const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp); + const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown); + const state: CarouselCardState = { autoSize, components: { @@ -103,9 +107,9 @@ export const useCarouselCard_unstable = ( tabIndex: cardFocus ? 0 : undefined, ...props, id, - onFocus, - onMouseDown, - onMouseUp, + onFocusCapture, + onPointerUp, + onPointerDown, ...focusAttrProps, }), { elementType: 'div' },