[@mantine/core] Fix incorrect creatable item styles calculation and i…

…ssue with repeated key (#1662)
mantinedev · Aug 12, 2022 · 27c0f8f · 27c0f8f
1 parent 38a06fa
commit 27c0f8f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 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, MultiSelect } from '@mantine/core';
+import { Box } from '@mantine/core';
 import Head from '../Head/Head';
 import { Jumbotron } from './Jumbotron/Jumbotron';
 import { Components } from './Components/Components';
@@ -20,16 +20,6 @@ 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/Select/Select.story.tsx b/src/mantine-core/src/Select/Select.story.tsx
@@ -12,3 +12,18 @@ export function ReadOnly() {
     </div>
   );
 }
+
+export function CreatableWithNoFilter() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        creatable
+        searchable
+        getCreateLabel={() => 'createLabel'}
+        shouldCreate={() => true}
+        data={['8.0.0', '8.1.0']}
+        value="8.0.0"
+      />
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Select/SelectItems/SelectItems.tsx b/src/mantine-core/src/Select/SelectItems/SelectItems.tsx
@@ -103,14 +103,11 @@ export function SelectItems({
 
   if (creatable) {
     const creatableDataItem = data[creatableDataIndex];
-    const selected =
-      typeof isItemSelected === 'function' ? isItemSelected(data[creatableDataIndex].value) : false;
     unGroupedItems.push(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         key={randomId()}
         className={classes.item}
-        data-selected={selected || undefined}
         data-hovered={hovered === creatableDataIndex || undefined}
         onMouseEnter={() => onItemHover(creatableDataIndex)}
         onMouseDown={(event: React.MouseEvent<HTMLDivElement>) => {