From 2a70608ee83d9293f8ab64d52eb501002d92c43e Mon Sep 17 00:00:00 2001
From: "j.dev" <junmin.dev@outlook.com>
Date: Tue, 12 Nov 2024 14:39:21 -0800
Subject: [PATCH] feat(4221): use different view for disabled multi-select

---
 .../generic/select/FormMultiSelect.tsx        | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/app/components/generic/select/FormMultiSelect.tsx b/app/components/generic/select/FormMultiSelect.tsx
index af3bea841..a57c9ad10 100644
--- a/app/components/generic/select/FormMultiSelect.tsx
+++ b/app/components/generic/select/FormMultiSelect.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { MultiSelect, ComboboxData } from '@mantine/core';
+import { MultiSelect, ComboboxData, InputBase, Pill } from '@mantine/core';
 import _kebabCase from 'lodash-es/kebabCase';
 import { FocusEventHandler } from 'react';
 import { cn } from '@/utils';
@@ -43,17 +43,27 @@ export default function FormMultiSelect({
         </Label>
       )}
 
-      <MultiSelect
-        placeholder="select..."
-        data={data}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        searchable
-        clearable
-        disabled={disabled}
-        classNames={{ input: cn('text-md', classNames?.input) }}
-      />
+      {disabled ? (
+        <InputBase component="div" multiline>
+          <Pill.Group>
+            {value.map((item) => (
+              <Pill key={item}>{item}</Pill>
+            ))}
+          </Pill.Group>
+        </InputBase>
+      ) : (
+        <MultiSelect
+          placeholder="select..."
+          data={data}
+          onChange={onChange}
+          onBlur={onBlur}
+          value={value}
+          searchable
+          clearable
+          disabled={disabled}
+          classNames={{ input: cn('text-md', classNames?.input) }}
+        />
+      )}
     </div>
   );
 }