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<