From a68b053601840745879820c178a14fe6913220e3 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 18 Aug 2023 13:13:36 -0700 Subject: [PATCH] fix: fix open/close event emitting in Safari (#7551) **Related Issue:** #7180 ## Summary This updates how `onToggleOpenCloseComponent` determines the duration for the `openTransitionProp` to be more robust to work consistently across browsers. The previous approach relied on the computed `transition` property having all associated transition values laid out per prop, which didn't work in Safari since it won't include all values if shared. This change should be covered by existing tests. cc @Elijbet --- .../src/utils/openCloseComponent.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts index fef61e73a00..cc10277457e 100644 --- a/packages/calcite-components/src/utils/openCloseComponent.ts +++ b/packages/calcite-components/src/utils/openCloseComponent.ts @@ -98,11 +98,18 @@ function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent = export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpenCloseComponent = false): void { readTask((): void => { if (component.transitionEl) { - const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" "); - const openTransitionPropIndex = allTransitionPropsArray.findIndex( - (item) => item === component.openTransitionProp + const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle( + component.transitionEl ); - const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1]; + const allTransitionDurationsArray = allDurations.split(","); + const allTransitionPropsArray = allProps.split(","); + const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp); + + const transitionDuration = + allTransitionDurationsArray[openTransitionPropIndex] ?? + /* Safari will have a single transition value if multiple props share it, + so we fall back to it if there's no matching prop duration */ + allTransitionDurationsArray[0]; if (transitionDuration === "0s") { emitImmediately(component, nonOpenCloseComponent);