Combobox With Popover

A combobox that renders the listbox inside a popover therefore the listbox is rendered at the root of the document.

Preview

 
<dt-combobox-with-popover
  ref="comboboxWithPopover"
  label="Label Text"
  content-width="anchor"
  max-height="300px"
  @escape="onEscape"
  @highlight="onHighlight"
  @select="onSelect"
>
  <template #input="{ inputProps, onInput }">
    <dt-input
      v-model="inputValue"
      placeholder="Select one or start typing"
      v-bind="inputProps"
      @input="onInput"
    />
  </template>
  <template #list="{ listProps }">
    <ul v-bind="listProps">
      <dt-list-item
        v-for="(item, i) in items"
        :key="item.id"
        navigation-type="arrow-keys"
        role="option"
        @click="onSelect(i)"
      >
        {{ item.name }}
      </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"
  @escape="onEscape"
  @highlight="onHighlight"
  @select="onSelect"
>
  <template #header>
    <div class="d-px12 d-py8 d-fw-semibold">Select an option</div>
  </template>
  <template #input="{ inputProps, onInput }">
    <dt-input v-bind="inputProps" @input="onInput" />
  </template>
  <template #list="{ listProps }">
    <ul v-bind="listProps">
      <dt-list-item
        v-for="(item, i) in items"
        :key="item.id"
        navigation-type="arrow-keys"
        role="option"
        @click="onSelect(i)"
      >
        {{ item.name }}
      </dt-list-item>
    </ul>
  </template>
  <template #footer>
    <div class="d-px12 d-py8 d-fc-tertiary">Footer content</div>
  </template>
</dt-combobox-with-popover>

Vue API

Slots

Name	Description
footer
header
input
list

Props

Name	Description	Default
label required	String to use for the input label. Type: string
appendTo	Sets the element to which the popover is going to append to. 'body' will append to the nearest body (supports shadow DOM). Type: HTML_ELEMENT_TYPE\|string Values: 'body''parent'HTMLElement	'body'
contentWidth	Width configuration for the popover content. When its value is 'anchor', the popover content will have the same width as the anchor. Type: string Values: anchor	null
description	Description for the input Type: string	''
dialogClass	Additional class for the popover dialog element. Type: string\|array\|object	''
emptyList	Sets the list to an empty state, and displays the message from prop `emptyStateMessage`. Type: boolean	false
emptyStateMessage	Message to show when the list is empty Type: string	''
hasSuggestionList	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. Type: boolean	true
labelVisible	Determines visibility of input label. Type: boolean Values: truefalse	true
listClass	Additional class for the wrapper list element. Type: string\|array\|object	''
listId	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. Type: string	function() { return getUniqueString(); }
loading	Determines when to show the skeletons and also controls aria-busy attribute. Type: boolean	false
maxHeight	Determines maximum height for the popover before overflow. Possible units rem\|px\|em Type: string	''
maxWidth	Determines maximum width for the popover before overflow. Possible units rem\|px\|%\|em Type: string	''
onBeginningOfList	A method that will be called when the selection goes past the beginning of the list. Type: func	null
onEndOfList	A method that will be called when the selection goes past the end of the list. Type: func	null
openWithArrowKeys	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. Type: boolean	false
padding	Vertical padding size around the list element. Type: string	'small'
popoverOffset	Displaces the popover content box from its anchor element by the specified number of pixels. Type: array	[0, 4]
popoverSticky	If the popover sticks to the input. Type: boolean\|string	false
showList	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. Type: boolean	null
size	Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl` Type: string Values: nullxssmmdlgxl	null
transition	Named transition when the content display is toggled. Type: string	'fade'

Events

Name	Description
escape	Event fired when 'escape' key is pressed
highlight	Event fired when an item is highlighted Type: Number
opened	Emitted when items are shown or hidden Type: Boolean \| Array
select	Event fired when item selected Type: Number

Accessibility

A screen reader visible only close button is added by default.

Preview

Usage #

Closing the list after selection #

With Header and Footer #

Vue API #