fix: Memoize 'id' so 'Item's and labels match

primer · Jun 23, 2021 · f38b828 · f38b828
1 parent 0229d93
commit f38b828
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -1,5 +1,5 @@
 import {CheckIcon, IconProps} from '@primer/octicons-react'
-import React, {useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import Truncate from '../Truncate'
@@ -307,10 +307,12 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
     onKeyPress,
     children,
     onClick,
-    id = uniqueId(),
+    id: _id,
     ...props
   } = itemProps
 
+  const id = useMemo(() => _id ?? uniqueId(), [_id])
+
   const keyPressHandler = useCallback(
     event => {
       if (disabled) {