[@mantine/core] Do not validate options by default in OptionsDropdown…

…, MultiSelect and Select Previously Mantine punished the common scenario of duplicate keys too heavily, resulting in component failures in duplicate options data. Now duplicate values are silently ignored as in React.
mantinedev · Nov 27, 2024 · 27cb9d7 · 27cb9d7
1 parent c83f5b0
commit 27cb9d7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.types.ts b/packages/@mantine/core/src/components/Combobox/Combobox.types.ts
@@ -34,7 +34,7 @@ export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'f
 export interface ComboboxLikeProps {
   /** Data used to generate options */
   data?: ComboboxData;
-
+  validateOptions?: boolean;
   /** Controlled dropdown opened state */
   dropdownOpened?: boolean;
 

diff --git a/packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx b/packages/@mantine/core/src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx
@@ -6,7 +6,7 @@ import { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from
 import { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';
 import { isEmptyComboboxData } from './is-empty-combobox-data';
 import { isOptionsGroup } from './is-options-group';
-import { validateOptions } from './validate-options';
+import { validateOptions as validateOptionsFn } from './validate-options';
 import classes from '../Combobox.module.css';
 
 export type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];
@@ -95,6 +95,7 @@ export interface OptionsDropdownProps {
   hidden?: boolean;
   hiddenWhenEmpty?: boolean;
   filterOptions?: boolean;
+  validateOptions?: boolean;
   withCheckIcon?: boolean;
   value?: string | string[] | null;
   checkIconPosition?: 'left' | 'right';
@@ -116,6 +117,7 @@ export function OptionsDropdown({
   maxDropdownHeight,
   withScrollArea = true,
   filterOptions = true,
+  validateOptions = false,
   withCheckIcon = false,
   value,
   checkIconPosition,
@@ -126,7 +128,9 @@ export function OptionsDropdown({
   scrollAreaProps,
   'aria-label': ariaLabel,
 }: OptionsDropdownProps) {
-  validateOptions(data);
+  if (validateOptions) {
+    validateOptionsFn(data);
+  }
 
   const shouldFilter = typeof search === 'string';
   const filteredData = shouldFilter

diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
@@ -189,6 +189,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
     required,
     mod,
     renderOption,
+    validateOptions,
     onRemove,
     onClear,
     scrollAreaProps,
@@ -412,6 +413,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}
           filterOptions={searchable}
+          validateOptions={validateOptions}
           value={_value}
           checkIconPosition={checkIconPosition}
           withCheckIcon={withCheckIcon}

diff --git a/packages/@mantine/core/src/components/Select/Select.tsx b/packages/@mantine/core/src/components/Select/Select.tsx
@@ -145,6 +145,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
     clearButtonProps,
     hiddenInputProps,
     renderOption,
+    validateOptions,
     onClear,
     autoComplete,
     scrollAreaProps,
@@ -300,6 +301,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}
           filterOptions={searchable && selectedOption?.label !== search}
+          validateOptions={validateOptions}
           value={_value}
           checkIconPosition={checkIconPosition}
           withCheckIcon={withCheckIcon}