From dc5ed3d85c3781ac72311692c6424bccc0c99f42 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Tue, 26 Mar 2024 13:47:14 +0400
Subject: [PATCH] [@mantine/core] Fix incorrect `disabled` prop handling in
 TagsInput and MultiSelect (#5959)

---
 .../components/MultiSelect/MultiSelect.tsx    |  1 +
 .../MultiSelect/MutliSelect.story.tsx         | 20 +++++++++++++++++++
 .../core/src/components/Pill/Pill.module.css  |  3 ++-
 .../core/src/components/Pill/Pill.tsx         |  5 ++++-
 .../components/TagsInput/TagsInput.story.tsx  | 20 +++++++++++++++++++
 .../src/components/TagsInput/TagsInput.tsx    |  1 +
 6 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
index f96397f4e69..775809c7882 100644
--- a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
@@ -266,6 +266,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
         onRemove?.(item);
       }}
       unstyled={unstyled}
+      disabled={disabled}
       {...getStyles('pill')}
     >
       {optionsLockup[item]?.label || item}
diff --git a/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx b/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
index e8a2d14cc6e..e29ccdaa881 100644
--- a/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
+++ b/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
@@ -24,6 +24,26 @@ export function Usage() {
   );
 }
 
+export function Disabled() {
+  return (
+    <div style={{ padding: 40 }}>
+      <MultiSelect
+        disabled
+        label="disabled"
+        defaultValue={['React', 'Angular']}
+        placeholder="Enter tags"
+      />
+      <fieldset disabled>
+        <MultiSelect
+          label="disabled fieldset"
+          defaultValue={['React', 'Angular']}
+          placeholder="Enter tags"
+        />
+      </fieldset>
+    </div>
+  );
+}
+
 export function EmptyStringValue() {
   return (
     <div style={{ padding: 40 }}>
diff --git a/packages/@mantine/core/src/components/Pill/Pill.module.css b/packages/@mantine/core/src/components/Pill/Pill.module.css
index 0a7bed047bd..12004c4e2c1 100644
--- a/packages/@mantine/core/src/components/Pill/Pill.module.css
+++ b/packages/@mantine/core/src/components/Pill/Pill.module.css
@@ -36,7 +36,7 @@
     color: var(--mantine-color-black);
   }
 
-  &:where([data-with-remove]) {
+  &:where([data-with-remove]:not(:has(button:disabled))) {
     padding-inline-end: 0;
   }
 
@@ -87,6 +87,7 @@
 
   .root[data-disabled] > &,
   &:disabled {
+    display: none;
     background-color: transparent;
     width: 0.8em;
     min-width: 0.8em;
diff --git a/packages/@mantine/core/src/components/Pill/Pill.tsx b/packages/@mantine/core/src/components/Pill/Pill.tsx
index 11006659c34..70e5cdc540f 100644
--- a/packages/@mantine/core/src/components/Pill/Pill.tsx
+++ b/packages/@mantine/core/src/components/Pill/Pill.tsx
@@ -117,7 +117,10 @@ export const Pill = factory<PillFactory>((_props, ref) => {
       variant={_variant}
       size={_size}
       {...getStyles('root', { variant: _variant })}
-      mod={[{ 'with-remove': withRemoveButton, disabled: disabled || ctx?.disabled }, mod]}
+      mod={[
+        { 'with-remove': withRemoveButton && !disabled, disabled: disabled || ctx?.disabled },
+        mod,
+      ]}
       {...others}
     >
       <span {...getStyles('label')}>{children}</span>
diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.story.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.story.tsx
index 35e683e720d..dc2976ef637 100644
--- a/packages/@mantine/core/src/components/TagsInput/TagsInput.story.tsx
+++ b/packages/@mantine/core/src/components/TagsInput/TagsInput.story.tsx
@@ -12,6 +12,26 @@ export function Usage() {
   );
 }
 
+export function Disabled() {
+  return (
+    <div style={{ padding: 40 }}>
+      <TagsInput
+        disabled
+        label="disabled"
+        defaultValue={['React', 'Angular']}
+        placeholder="Enter tags"
+      />
+      <fieldset disabled>
+        <TagsInput
+          label="disabled fieldset"
+          defaultValue={['React', 'Angular']}
+          placeholder="Enter tags"
+        />
+      </fieldset>
+    </div>
+  );
+}
+
 export function Clearable() {
   return (
     <div style={{ padding: 40 }}>
diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
index 1fb96cf594b..39a22c6c5ef 100644
--- a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
+++ b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
@@ -311,6 +311,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
         onRemove?.(item);
       }}
       unstyled={unstyled}
+      disabled={disabled}
       {...getStyles('pill')}
     >
       {item}