feat(4221): use different view for disabled multi-select

bcgov · Nov 12, 2024 · 2a70608 · 2a70608
1 parent 1a341a0
commit 2a70608
Showing 1 changed file with 22 additions and 12 deletions.
diff --git 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>
   );
 }