[@mantine/core] Fix keys errors in Select and MultiSelect components …

…when items with group are mixed with items without groups (#2045)
mantinedev · Aug 12, 2022 · 38a06fa · 38a06fa
1 parent 969a3e5
commit 38a06fa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/docs/src/components/HomePage/HomePage.tsx b/docs/src/components/HomePage/HomePage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box } from '@mantine/core';
+import { Box, MultiSelect } from '@mantine/core';
 import Head from '../Head/Head';
 import { Jumbotron } from './Jumbotron/Jumbotron';
 import { Components } from './Components/Components';
@@ -20,6 +20,16 @@ export function HomePage() {
     <>
       <Head title="Mantine" disableTitleTemplate />
       <Box sx={(theme) => ({ position: 'relative', zIndex: 1, boxShadow: theme.shadows.sm })}>
+        <MultiSelect
+          label="Your favorite Rick and Morty character"
+          placeholder="Pick all that you like"
+          data={[
+            { value: 'rick', label: 'Rick', group: 'Used to be a pickle' },
+            { value: 'morty', label: 'Morty', group: '' },
+            { value: 'beth', label: 'Beth', group: 'Never was a pickle' },
+            { value: 'summer', label: 'Summer', group: 'Never was a pickle' },
+          ]}
+        />
         <Jumbotron />
         <Waves height={40} width={150} />
         <Components />

diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx b/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx
@@ -12,3 +12,18 @@ export function ReadOnly() {
     </div>
   );
 }
+
+export function EmptyGroup() {
+  return (
+    <MultiSelect
+      label="Your favorite Rick and Morty character"
+      placeholder="Pick all that you like"
+      data={[
+        { value: 'rick', label: 'Rick', group: 'Used to be a pickle' },
+        { value: 'morty', label: 'Morty', group: '' },
+        { value: 'beth', label: 'Beth', group: 'Never was a pickle' },
+        { value: 'summer', label: 'Summer', group: 'Never was a pickle' },
+      ]}
+    />
+  );
+}
diff --git a/src/mantine-core/src/Select/SelectItems/SelectItems.tsx b/src/mantine-core/src/Select/SelectItems/SelectItems.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { DefaultProps, MantineSize, Selectors } from '@mantine/styles';
+import { randomId } from '@mantine/hooks';
 import { Text } from '../../Text/Text';
 import { Divider } from '../../Divider/Divider';
 import { SelectItem } from '../types';
@@ -107,7 +108,7 @@ export function SelectItems({
     unGroupedItems.push(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
-        key={creatableDataItem.value}
+        key={randomId()}
         className={classes.item}
         data-selected={selected || undefined}
         data-hovered={hovered === creatableDataIndex || undefined}
@@ -131,7 +132,7 @@ export function SelectItems({
 
   if (groupedItems.length > 0 && unGroupedItems.length > 0) {
     unGroupedItems.unshift(
-      <div className={classes.separator}>
+      <div className={classes.separator} key="empty-group-separator">
         <Divider />
       </div>
     );