diff --git a/docs/reference/generated/radio-indicator.json b/docs/reference/generated/radio-indicator.json
index ebe8fd7160..bc88ade35f 100644
--- a/docs/reference/generated/radio-indicator.json
+++ b/docs/reference/generated/radio-indicator.json
@@ -8,7 +8,7 @@
},
"keepMounted": {
"type": "boolean",
- "default": "true",
+ "default": "false",
"description": "Whether to keep the HTML element in the DOM when the radio button is inactive."
},
"render": {
diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
index 3bc3f913f9..099128c4c0 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
@@ -71,7 +71,6 @@ describe('', () => {
);
const indicator = container.querySelector('span');
expect(indicator).not.to.equal(null);
- expect(indicator).to.have.attribute('hidden');
});
it('should keep indicator mounted when checked', async () => {
@@ -82,7 +81,6 @@ describe('', () => {
);
const indicator = container.querySelector('span');
expect(indicator).not.to.equal(null);
- expect(indicator).not.to.have.attribute('hidden');
});
it('should keep indicator mounted when indeterminate', async () => {
@@ -93,7 +91,6 @@ describe('', () => {
);
const indicator = container.querySelector('span');
expect(indicator).not.to.equal(null);
- expect(indicator).not.to.have.attribute('hidden');
});
});
@@ -108,7 +105,7 @@ describe('', () => {
-
+
);
@@ -116,14 +113,14 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
+ expect(screen.getByTestId('indicator')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator')).to.equal(null);
});
});
@@ -172,16 +169,13 @@ describe('', () => {
}
const { user } = await render();
-
- expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
+ expect(screen.getByTestId('indicator')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(animationFinished).to.equal(true);
});
-
- expect(animationFinished).to.equal(true);
});
});
diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
index 9d52af396e..700583ac4a 100644
--- a/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
+++ b/packages/react/src/checkbox/indicator/CheckboxIndicator.tsx
@@ -28,7 +28,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
const rendered = rootState.checked || rootState.indeterminate;
- const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+ const { transitionStatus, setMounted } = useTransitionStatus(rendered);
const indicatorRef = React.useRef(null);
const mergedRef = useForkRef(forwardedRef, indicatorRef);
@@ -65,10 +65,7 @@ const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
state,
className,
customStyleHookMapping,
- extraProps: {
- hidden: !mounted,
- ...otherProps,
- },
+ extraProps: otherProps,
});
const shouldRender = keepMounted || rendered;
diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
index 349f2b6d80..c9f078aecb 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -43,7 +43,7 @@ describe('', () => {
-
+
@@ -55,14 +55,14 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator')).to.equal(null);
});
});
@@ -125,9 +125,7 @@ describe('', () => {
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(animationFinished).to.equal(true);
});
-
- expect(animationFinished).to.equal(true);
});
});
diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
index b7a6d1d95f..c235e7675c 100644
--- a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
+++ b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx
@@ -27,15 +27,14 @@ const MenuCheckboxItemIndicator = React.forwardRef(function MenuCheckboxItemIndi
const indicatorRef = React.useRef(null);
const mergedRef = useForkRef(forwardedRef, indicatorRef);
- const { mounted, transitionStatus, setMounted } = useTransitionStatus(item.checked);
+ const { transitionStatus, setMounted } = useTransitionStatus(item.checked);
const getItemProps = React.useCallback(
(externalProps = {}) =>
mergeReactProps(externalProps, {
'aria-hidden': true,
- hidden: !mounted,
}),
- [mounted],
+ [],
);
useAfterExitAnimation({
diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
index f78529f19c..cdd3719dd7 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -43,7 +43,7 @@ describe('', () => {
-
+
@@ -60,14 +60,14 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator')).to.equal(null);
});
});
@@ -129,15 +129,13 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator')).not.to.have.attribute('hidden');
+ expect(screen.getByTestId('indicator')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator')).to.have.attribute('hidden');
+ expect(animationFinished).to.equal(true);
});
-
- expect(animationFinished).to.equal(true);
});
});
diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
index 5bc9f9c010..b69dbaf0fb 100644
--- a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
+++ b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.tsx
@@ -27,15 +27,14 @@ const MenuRadioItemIndicator = React.forwardRef(function MenuRadioItemIndicator(
const indicatorRef = React.useRef(null);
const mergedRef = useForkRef(forwardedRef, indicatorRef);
- const { mounted, transitionStatus, setMounted } = useTransitionStatus(item.checked);
+ const { transitionStatus, setMounted } = useTransitionStatus(item.checked);
const getItemProps = React.useCallback(
(externalProps = {}) =>
mergeReactProps(externalProps, {
'aria-hidden': true,
- hidden: !mounted,
}),
- [mounted],
+ [],
);
useAfterExitAnimation({
diff --git a/packages/react/src/radio-group/RadioGroup.test.tsx b/packages/react/src/radio-group/RadioGroup.test.tsx
index f7fa355072..ae2f76cb5f 100644
--- a/packages/react/src/radio-group/RadioGroup.test.tsx
+++ b/packages/react/src/radio-group/RadioGroup.test.tsx
@@ -314,10 +314,10 @@ describe('', () => {
render(
-
+
-
+
,
);
diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
index ee08121d1c..2daffb54fb 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.test.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -31,14 +31,10 @@ describe('', () => {
-
+
-
+
@@ -47,14 +43,14 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
+ expect(screen.getByTestId('indicator-a')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator-a')).to.have.attribute('hidden');
+ expect(screen.queryByTestId('indicator-a')).to.equal(null);
});
});
@@ -109,15 +105,13 @@ describe('', () => {
const { user } = await render();
- expect(screen.getByTestId('indicator-a')).not.to.have.attribute('hidden');
+ expect(screen.getByTestId('indicator-a')).not.to.equal(null);
const closeButton = screen.getByText('Close');
await user.click(closeButton);
await waitFor(() => {
- expect(screen.getByTestId('indicator-a')).to.have.attribute('hidden');
+ expect(animationFinished).to.equal(true);
});
-
- expect(animationFinished).to.equal(true);
});
});
diff --git a/packages/react/src/radio/indicator/RadioIndicator.tsx b/packages/react/src/radio/indicator/RadioIndicator.tsx
index 11aadebfce..6624526904 100644
--- a/packages/react/src/radio/indicator/RadioIndicator.tsx
+++ b/packages/react/src/radio/indicator/RadioIndicator.tsx
@@ -19,13 +19,13 @@ const RadioIndicator = React.forwardRef(function RadioIndicator(
props: RadioIndicator.Props,
forwardedRef: React.ForwardedRef,
) {
- const { render, className, keepMounted = true, ...otherProps } = props;
+ const { render, className, keepMounted = false, ...otherProps } = props;
const rootState = useRadioRootContext();
const rendered = rootState.checked;
- const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+ const { transitionStatus, setMounted } = useTransitionStatus(rendered);
const state: RadioIndicator.State = React.useMemo(
() => ({
@@ -43,10 +43,7 @@ const RadioIndicator = React.forwardRef(function RadioIndicator(
ref: mergedRef,
className,
state,
- extraProps: {
- hidden: !mounted,
- ...otherProps,
- },
+ extraProps: otherProps,
customStyleHookMapping,
});
@@ -70,7 +67,7 @@ namespace RadioIndicator {
export interface Props extends BaseUIComponentProps<'span', State> {
/**
* Whether to keep the HTML element in the DOM when the radio button is inactive.
- * @default true
+ * @default false
*/
keepMounted?: boolean;
}
@@ -100,7 +97,7 @@ RadioIndicator.propTypes /* remove-proptypes */ = {
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
/**
* Whether to keep the HTML element in the DOM when the radio button is inactive.
- * @default true
+ * @default false
*/
keepMounted: PropTypes.bool,
/**