fix(multi-select): fix filterItem return type (#1972)

carbon-design-system · Aug 8, 2024 · 6140c3c · 6140c3c
1 parent 607a97c
commit 6140c3c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 4 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2378,7 +2378,7 @@ export interface MultiSelectItem {
 | selectionFeedback        | No       | <code>let</code> | No       | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code>                                                | <code>"top-after-reopen"</code>                                                            | Specify the selection feedback after selecting items                                                                                                                  |
 | disabled                 | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to disable the dropdown                                                                                                                                 |
 | filterable               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to filter items                                                                                                                                         |
-| filterItem               | No       | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => string</code>                                              | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison                                                                                 |
+| filterItem               | No       | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => boolean</code>                                             | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison                                                                                 |
 | light                    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to enable the light variant                                                                                                                             |
 | locale                   | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>"en"</code>                                                                          | Specify the locale                                                                                                                                                    |
 | placeholder              | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the placeholder text                                                                                                                                          |

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -7123,7 +7123,7 @@
           "name": "filterItem",
           "kind": "let",
           "description": "Override the filtering logic\nThe default filtering is an exact string comparison",
-          "type": "(item: MultiSelectItem, value: string) => string",
+          "type": "(item: MultiSelectItem, value: string) => boolean",
           "value": "(item, value) =>     item.text.toLowerCase().includes(value.trim().toLowerCase())",
           "isFunction": true,
           "isFunctionDeclaration": false,

diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
@@ -69,7 +69,7 @@
   /**
    * Override the filtering logic
    * The default filtering is an exact string comparison
-   * @type {(item: MultiSelectItem, value: string) => string}
+   * @type {(item: MultiSelectItem, value: string) => boolean}
    */
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.trim().toLowerCase());

diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
@@ -127,6 +127,9 @@
 
 <MultiSelect
   filterable
+  filterItem="{(item, query) => {
+    return item.text.toLowerCase().includes(query.toLowerCase());
+  }}"
   titleText="Contact"
   placeholder="Filter contact methods..."
   items="{[

diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts
@@ -90,7 +90,7 @@ export interface MultiSelectProps extends RestProps {
    * The default filtering is an exact string comparison
    * @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
    */
-  filterItem?: (item: MultiSelectItem, value: string) => string;
+  filterItem?: (item: MultiSelectItem, value: string) => boolean;
 
   /**
    * Set to `true` to open the dropdown