Preview
<dt-combobox-with-popover label="Label Text" :show-list="showList" content-width="anchor" max-height="300px" @select="onSelect" @opened="onOpened" > <template #input="{ inputProps, onInput }"> <dt-input v-model="inputValue" placeholder="Select one or start typing" v-bind="inputProps" @update:model-value="onInput" /> </template> <template #list="{ listProps }"> <ul v-bind="listProps" class="d-p-50"> <dt-list-item v-for="(item, i) in items" :key="item.id" role="option" navigation-type="arrow-keys" @click="onSelect(i)" > {{ item.number }} <template #right> <span class="d-fc-secondary">{{ item.type }}</span> </template> </dt-list-item> </ul> </template> </dt-combobox-with-popover>
Usage #
The combobox contains the input and list slots specified in the combobox documentation.
Since it's using the popover content to render the list, it's also possible to add a header and footer to the popover
as specified in the popover documentation.
Closing the list after selection #
When not passing showList and using the default combobox trigger on input focus,
to close the list with the select event or with the click event in the list item,
use the closeComboboxList method:
methods: {
onSelect (i) {
this.$refs.comboboxWithPopover.closeComboboxList();
},
}
With Header and Footer #
You can add header and footer content to the popover using the header and footer slots.
<dt-combobox-with-popover label="Label Text" :show-list="showListHeaderFooter" content-width="anchor" max-height="300px" @select="onSelectHeaderFooter" @opened="onOpenedHeaderFooter" > <template #header> <div class="d-px-150 d-py-100 d-fw-semibold">Select an option</div> </template> <template #input="{ inputProps, onInput }"> <dt-input v-model="inputValueHeaderFooter" placeholder="Select one or start typing" v-bind="inputProps" @update:model-value="onInput" /> </template> <template #list="{ listProps }"> <ul v-bind="listProps" class="d-p-50"> <dt-list-item v-for="(item, i) in items" :key="item.id" role="option" navigation-type="arrow-keys" @click="onSelectHeaderFooter(i)" > {{ item.number }} <template #right> <span class="d-fc-secondary">{{ item.type }}</span> </template> </dt-list-item> </ul> </template> <template #footer> <div class="d-px-150 d-py-100 d-fc-tertiary">Footer content</div> </template> </dt-combobox-with-popover>
Content Mode #
Combobox popover content renders outside the DOM tree. Use the contentMode prop to apply color mode (invert, light, dark) to the positioned content. See Positioned Components for details.
<dt-combobox-with-popover content-mode="invert">...</dt-combobox-with-popover> <dt-combobox-with-popover content-mode="dark">...</dt-combobox-with-popover> <dt-combobox-with-popover content-mode="light">...</dt-combobox-with-popover>
Vue API #
import { DtComboboxWithPopover } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
footer | |
header | |
input | |
list |
Props
Name
|
Default
|
Type
|
|---|---|---|
label
required
| string String to use for the input label. | |
appendTo | 'body' |
"'body'"
|
"'parent'"
|
"HTMLElement"
|
""
Sets the element to which the popover is going to append to.
'body' will append to the nearest body (supports shadow DOM). |
contentMode |
"light"
|
"dark"
|
"invert"
Applies a color mode to the positioned content element. | |
contentWidth | null |
"anchor"
Width configuration for the popover content. When its value is 'anchor',
the popover content will have the same width as the anchor. |
description | '' | string Description for the input |
dialogClass | '' | string|array|object Additional class for the popover dialog element. |
emptyList | false | boolean Sets the list to an empty state, and displays the message from prop |
emptyStateMessage | '' | string Message to show when the list is empty |
footerClass | '' | string|array|object Additional class for the footer wrapper element. |
hasSuggestionList | true | boolean Displays the list when the combobox is focused, before the user has typed anything.
When this is enabled the list will not close after selection. |
headerClass | '' | string|array|object Additional class for the header wrapper element. |
listClass | '' | string|array|object Additional class for the wrapper list element. |
listId | generated unique ID | string Sets an ID on the list element of the component. Used by several aria attributes
as well as when deriving the IDs for each item. |
loading | false | boolean Determines when to show the skeletons and also controls aria-busy attribute. |
maxHeight | '' | string Determines maximum height for the popover before overflow.
Possible units rem|px|em |
maxWidth | '' | string Determines maximum width for the popover before overflow.
Possible units rem|px|%|em |
onBeginningOfList | null | func A method that will be called when the selection goes past the beginning of the list. |
onEndOfList | null | func A method that will be called when the selection goes past the end of the list. |
openWithArrowKeys | false | boolean If the list should be shown by pressing up or down arrow key on the input element.
This can be set when not passing showList prop. |
padding | 'small' | string Vertical padding size around the list element. |
popoverOffset | [0, 4] | array Displaces the popover content box from its anchor element
by the specified number of pixels. |
popoverSticky | false | boolean|string If the popover sticks to the input. |
showLabel | true |
"true"
|
"false"
Determines visibility of input label. |
showList | null | boolean Determines when to show the list element and also controls the aria-expanded attribute.
Leaving this null will have the combobox trigger on input focus by default.
If you set this value, the default trigger behavior will be disabled and you can
control it as you need. |
size | null |
"100"
|
"200"
|
"300"
|
"400"
|
"500"
Size of the input. |
transition | 'fade' | string Named transition when the content display is toggled. |
Events
Name
|
Type
|
|---|---|
escape | Event fired when 'escape' key is pressed |
highlight | Number Event fired when an item is highlighted |
opened | Boolean | Array Emitted when items are shown or hidden |
select | Number Event fired when item selected |
Accessibility #
A screen reader visible only close button is added by default.