diff --git a/packages/components/src/spectrum/utils/itemUtils.test.tsx b/packages/components/src/spectrum/utils/itemUtils.test.tsx
index 51c6932a91..a09c8fc02d 100644
--- a/packages/components/src/spectrum/utils/itemUtils.test.tsx
+++ b/packages/components/src/spectrum/utils/itemUtils.test.tsx
@@ -61,7 +61,7 @@ describe('getItemTextValue', () => {
-
object
,
- undefined,
+ '',
],
])(
'should return the expected `textValue`: %s, %s',
diff --git a/packages/components/src/spectrum/utils/itemUtils.ts b/packages/components/src/spectrum/utils/itemUtils.ts
index 49895787c9..a0e15bb07b 100644
--- a/packages/components/src/spectrum/utils/itemUtils.ts
+++ b/packages/components/src/spectrum/utils/itemUtils.ts
@@ -137,9 +137,10 @@ export function getItemKey<
*/
export function getItemTextValue(item: ItemElement): string | undefined {
if (item.props.textValue == null) {
+ const itemKeyStr = item.key == null ? undefined : String(item.key);
return ['string', 'boolean', 'number'].includes(typeof item.props.children)
? String(item.props.children)
- : undefined;
+ : itemKeyStr;
}
return item.props.textValue === ''
diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx
index c4a2c7b4cf..18e7433aff 100644
--- a/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx
+++ b/packages/components/src/spectrum/utils/useRenderNormalizedItem.test.tsx
@@ -105,7 +105,7 @@ describe.each([
it.each([
[
{ key: 'mock.key', textValue: undefined },
- 'Empty',
+ 'mock.key',
'wrapIcon(undefined, illustration)',
'wrapPrimitiveWithText(undefined, undefined)',
'wrapPrimitiveWithText(undefined, description)',
@@ -115,6 +115,16 @@ describe.each([
key: 'mock.key',
item: { content: 'mock.content', textValue: undefined },
},
+ 'mock.key',
+ 'wrapIcon(undefined, illustration)',
+ 'wrapPrimitiveWithText(mock.content, undefined)',
+ 'wrapPrimitiveWithText(undefined, description)',
+ ],
+ [
+ {
+ key: 'mock.key',
+ item: { content: 'mock.content', textValue: '' },
+ },
'Empty',
'wrapIcon(undefined, illustration)',
'wrapPrimitiveWithText(mock.content, undefined)',
@@ -132,15 +142,30 @@ describe.each([
],
[
{
- key: 'mock.key',
+ key: '',
item: {
- textValue: 'mock.textValue',
+ textValue: undefined,
icon: 'mock.icon',
content: 'mock.content',
description: 'mock.description',
},
},
- 'mock.textValue',
+ 'Empty',
+ 'wrapIcon(mock.icon, illustration)',
+ 'wrapPrimitiveWithText(mock.content, undefined)',
+ 'wrapPrimitiveWithText(mock.description, description)',
+ ],
+ [
+ {
+ key: undefined,
+ item: {
+ textValue: undefined,
+ icon: 'mock.icon',
+ content: 'mock.content',
+ description: 'mock.description',
+ },
+ },
+ undefined,
'wrapIcon(mock.icon, illustration)',
'wrapPrimitiveWithText(mock.content, undefined)',
'wrapPrimitiveWithText(mock.description, description)',
diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx
index 74258085c1..1a14cc6fa6 100644
--- a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx
+++ b/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx
@@ -8,8 +8,8 @@ import { ListActionMenu, ListActionMenuProps } from '../ListActionMenu';
import { Item } from '../shared';
import {
getItemKey,
- ItemIconSlot,
ITEM_EMPTY_STRING_TEXT_VALUE,
+ ItemIconSlot,
NormalizedItem,
TooltipOptions,
} from './itemUtils';
@@ -50,7 +50,9 @@ export function useRenderNormalizedItem({
(normalizedItem: NormalizedItem) => {
const itemKey = getItemKey(normalizedItem);
const content = wrapPrimitiveWithText(normalizedItem.item?.content);
- const textValue = normalizedItem.item?.textValue ?? '';
+ const textValue =
+ normalizedItem.item?.textValue ??
+ (itemKey == null ? undefined : String(itemKey));
const description = showItemDescriptions
? wrapPrimitiveWithText(normalizedItem.item?.description, 'description')