Combobox

Components

Combobox

Combine a text input field with a dropdown menu for enhanced user interaction.

＠ Mention
Mention and reference other users or entities within your text using @-mentions.
Try mentioning R2-D2﻿
 or Mace Windu﻿
.

Installation

npx @udecode/plate-ui@latest add combobox

Examples

import React from 'react';
import { ComboboxItemProps } from '@udecode/plate-combobox';
import {
  EmojiItemData,
  KEY_EMOJI,
  TEmojiCombobox,
  useEmojiComboboxState,
} from '@udecode/plate-emoji';
 
import { Combobox } from './combobox';
 
export function EmojiComboboxItem({
  item,
}: ComboboxItemProps<EmojiItemData>): JSX.Element {
  const {
    data: { id, emoji },
  } = item;
 
  return (
    <div>
      {emoji} :{id}:
    </div>
  );
}
 
export function EmojiCombobox<TData extends EmojiItemData = EmojiItemData>({
  pluginKey = KEY_EMOJI,
  id = pluginKey,
  ...props
}: TEmojiCombobox<TData>) {
  const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey });
 
  return (
    <Combobox
      id={id}
      trigger={trigger}
      controlled
      onSelectItem={onSelectItem}
      onRenderItem={EmojiComboboxItem}
      {...props}
    />
  );
}

import React from 'react';
import { ComboboxProps, Data, NoData } from '@udecode/plate-combobox';
import { getPluginOptions, usePlateEditorRef } from '@udecode/plate-common';
import {
  ELEMENT_MENTION,
  getMentionOnSelectItem,
  MentionPlugin,
} from '@udecode/plate-mention';
 
import { Combobox } from './combobox';
 
export interface MentionComboboxProps<TData extends Data = NoData>
  extends Partial<ComboboxProps<TData>> {
  pluginKey?: string;
}
 
export function MentionCombobox<TData extends Data = NoData>({
  pluginKey = ELEMENT_MENTION,
  id = pluginKey,
  ...props
}: MentionComboboxProps<TData>) {
  const editor = usePlateEditorRef();
 
  const { trigger } = getPluginOptions<MentionPlugin>(editor, pluginKey);
 
  return (
    <Combobox
      id={id}
      trigger={trigger!}
      controlled
      onSelectItem={getMentionOnSelectItem({
        key: pluginKey,
      })}
      {...props}
    />
  );
}