[@mantine/core] Fix incorrect disabled prop handling in TagsInput a…

…nd MultiSelect (#5959)
mantinedev · Mar 26, 2024 · dc5ed3d · dc5ed3d
1 parent 211b00c
commit dc5ed3d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -311,6 +311,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
         onRemove?.(item);
       }}
       unstyled={unstyled}
+      disabled={disabled}
       {...getStyles('pill')}
     >
       {item}