fix(collapsible): close animation on default open (kobaltedev#483)

* fix(accordion): don't steal focus on content focus

packages/core/package.json

@@ -76,7 +76,7 @@
 		"@kobalte/utils": "^0.9.1",
 		"@solid-primitives/props": "^3.1.8",
 		"@solid-primitives/resize-observer": "^2.0.26",
-		"solid-presence": "^0.1.6",
+		"solid-presence": "^0.1.8",
 		"solid-prevent-scroll": "^0.1.4"
 	},
 	"devDependencies": {

packages/core/src/accordion/accordion-root.tsx

@@ -61,7 +61,7 @@ export interface AccordionRootCommonProps<T extends HTMLElement = HTMLElement> {
 	ref: T | ((el: T) => void);
 	onKeyDown: JSX.EventHandlerUnion<T, KeyboardEvent>;
 	onMouseDown: JSX.EventHandlerUnion<T, MouseEvent>;
-	onFocusIn: JSX.EventHandlerUnion<T, FocusEvent>;
+	onFocusIn: JSX.EventHandlerUnion<T, FocusEvent>; // TODO: remove next breaking
 	onFocusOut: JSX.EventHandlerUnion<T, FocusEvent>;
 }
 
@@ -102,7 +102,7 @@ export function AccordionRoot<T extends ValidComponent = "div">(
 		"shouldFocusWrap",
 		"onKeyDown",
 		"onMouseDown",
-		"onFocusIn",
+		"onFocusIn", // TODO: remove next breaking
 		"onFocusOut",
 	]);
 
@@ -122,6 +122,8 @@ export function AccordionRoot<T extends ValidComponent = "div">(
 		dataSource: items,
 	});
 
+	listState.selectionManager().setFocusedKey("item-1");
+
 	const selectableList = createSelectableList(
 		{
 			selectionManager: () => listState.selectionManager(),
@@ -156,8 +158,7 @@ export function AccordionRoot<T extends ValidComponent = "div">(
 						selectableList.onMouseDown,
 					])}
 					onFocusIn={composeEventHandlers([
-						local.onFocusIn,
-						selectableList.onFocusIn,
+						local.onFocusIn, // TODO: remove next breaking
 					])}
 					onFocusOut={composeEventHandlers([
 						local.onFocusOut,

packages/core/src/collapsible/collapsible-content.tsx

@@ -78,9 +78,7 @@ export function CollapsibleContent<T extends ValidComponent = "div">(
 	// When opening we want it to immediately open to retrieve dimensions.
 	// When closing we delay `present` to retrieve dimensions before closing.
 	const isOpen = () => context.isOpen() || present();
-
 	let isMountAnimationPrevented = isOpen();
-	let originalStyles: Record<string, string> | undefined;
 
 	onMount(() => {
 		const raf = requestAnimationFrame(() => {
@@ -105,11 +103,6 @@ export function CollapsibleContent<T extends ValidComponent = "div">(
 					return;
 				}
 
-				originalStyles = originalStyles || {
-					transitionDuration: ref()!.style.transitionDuration,
-					animationName: ref()!.style.animationName,
-				};
-
 				// block any animations/transitions so the element renders at its full dimensions
 				ref()!.style.transitionDuration = "0s";
 				ref()!.style.animationName = "none";
@@ -121,10 +114,23 @@ export function CollapsibleContent<T extends ValidComponent = "div">(
 
 				// kick off any animations/transitions that were originally set up if it isn't the initial mount
 				if (!isMountAnimationPrevented) {
-					ref()!.style.transitionDuration = originalStyles.transitionDuration;
-					ref()!.style.animationName = originalStyles.animationName;
+					ref()!.style.transitionDuration = "";
+					ref()!.style.animationName = "";
+				}
+			},
+		),
+	);
+
+	createEffect(
+		on(
+			context.isOpen,
+			(open) => {
+				if (!open && ref()) {
+					ref()!.style.transitionDuration = "";
+					ref()!.style.animationName = "";
 				}
 			},
+			{ defer: true },
 		),
 	);
 

packages/core/src/combobox/combobox-base.tsx

@@ -589,7 +589,7 @@ export function ComboboxBase<
 
 	const { present: contentPresent } = createPresence({
 		show: () => local.forceMount || disclosureState.isOpen(),
-		element: contentRef,
+		element: () => contentRef() ?? null,
 	});
 
 	const open = (