diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d9bfa1be..16a4c0a4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2327,6 +2327,7 @@ export interface MultiSelectItem {
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| inputRef | let
| Yes | null | HTMLInputElement
| null
| Obtain a reference to the input HTML element |
| open | let
| Yes | boolean
| false
| Set to `true` to open the dropdown |
| value | let
| Yes | string
| ""
| Specify the multiselect value |
| selectedIds | let
| Yes | MultiSelectItemId[]
| []
| Set the selected ids |
@@ -2580,13 +2581,13 @@ None.
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | let
| Yes | null | HTMLUListElement
| null
| Obtain a reference to the overflow menu element |
| buttonRef | let
| Yes | null | HTMLButtonElement
| null
| Obtain a reference to the trigger button element |
+| icon | let
| Yes | typeof import("carbon-icons-svelte").CarbonIcon
| -- | Specify the icon from `carbon-icons-svelte` to render |
| open | let
| Yes | boolean
| false
| Set to `true` to open the menu |
| size | let
| No | "sm" | "xl"
| -- | Specify the size of the overflow menu |
| direction | let
| No | "top" | "bottom"
| "bottom"
| Specify the direction of the overflow menu relative to the button |
| light | let
| No | boolean
| false
| Set to `true` to enable the light variant |
| flipped | let
| No | boolean
| false
| Set to `true` to flip the menu relative to the button |
| menuOptionsClass | let
| No | string
| -- | Specify the menu options class |
-| icon | let
| No | typeof import("carbon-icons-svelte").CarbonIcon
| -- | Specify the icon from `carbon-icons-svelte` to render |
| iconClass | let
| No | string
| -- | Specify the icon class |
| iconDescription | let
| No | string
| "Open and close list of options"
| Specify the ARIA label for the icon |
| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the button element |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 291edbf3..ffe074e4 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5781,6 +5781,16 @@
"isFunction": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "inputRef",
+ "kind": "let",
+ "description": "Obtain a reference to the input HTML element",
+ "type": "null | HTMLInputElement",
+ "value": "null",
+ "isFunction": false,
+ "constant": false,
+ "reactive": true
}
],
"slots": [],
@@ -6369,7 +6379,7 @@
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
- "reactive": false
+ "reactive": true
},
{
"name": "iconClass",
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 40c65ecd..cdfa1070 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -125,6 +125,9 @@
*/
export let name = undefined;
+ /** Obtain a reference to the input HTML element */
+ export let inputRef = null;
+
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -143,7 +146,7 @@
let multiSelectRef = null;
let fieldRef = null;
let selectionRef = null;
- let inputRef = null;
+
let inputValue = "";
let initialSorted = false;
let highlightedIndex = -1;
diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts
index 9d89e4ec..fc86d082 100644
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@@ -174,6 +174,12 @@ export interface MultiSelectProps
* Specify a name attribute for the select
*/
name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ inputRef?: null | HTMLInputElement;
}
export default class MultiSelect extends SvelteComponentTyped<