Combobox + default value & autocomplete?

[ceyerkes]

Hi! Wondering if it's possible to use a Combobox with a default selection as well as autocomplete/search. Examples on the website show an empty state for the Combobox, plus the dropdown arrow disappears, which leads me to believe maybe what I'm asking for isn't compatible? thank you!

[dosubot[bot]]

🤖

Hey @ceyerkes! Great to see you diving into more components of Paste 🚀. I remember our last chat - always happy to help. I'm looking into your Combobox query now and will get back to you with something useful shortly!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Yes, it is possible to use a Combobox with a default selection as well as autocomplete functionality. The Combobox component can be set up with autocomplete functionality so users can easily find a specific option, and it can also be used as a controlled component to manage the default selection.

Here's an example of how you might set up a controlled Combobox with a default selection and autocomplete enabled:

import React from 'react';
import { Combobox } from '@twilio-paste/core/combobox';

const items = ['Option 1', 'Option 2', 'Option 3'];

const ControlledCombobox = () => {
  const [inputValue, setInputValue] = React.useState('Option 1');
  const [selectedItem, setSelectedItem] = React.useState('Option 1');

  const handleInputValueChange = ({inputValue}) => {
    setInputValue(inputValue);
  };

  const handleSelectedItemChange = ({selectedItem}) => {
    setSelectedItem(selectedItem);
  };

  return (
    <Combobox
      items={items}
      inputValue={inputValue}
      onInputValueChange={handleInputValueChange}
      selectedItem={selectedItem}
      onSelectedItemChange={handleSelectedItemChange}
      autocomplete
    />
  );
};

In this example, the inputValue state is initialized with 'Option 1', which sets the default selection in the Combobox. The autocomplete prop is passed to enable the autocomplete feature, allowing users to filter the list of options by typing.

For more information on the Combobox component and its properties, you can visit the documentation:

• Combobox
• Controlled Combobox

Regarding the dropdown arrow disappearing, this might be a specific implementation detail or a styling choice. The Combobox should still function with both a default selection and autocomplete enabled. If you're experiencing issues with the dropdown arrow in your implementation, you may want to check the Combobox's styling or reach out for support with your specific use case.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Combobox when fail to retrieve dropdown content - Answer (updated: 06/28/2022, similarity score: 88%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 87%)
• Combobox: No results found while searching - Answer (updated: 06/14/2022, similarity score: 87%)

[dosubot[bot]]

🤖

Yes, it is indeed possible to use a Combobox with a default selection as well as autocomplete functionality in the Paste design system. The Combobox component in Paste can be used as a controlled component, which means you can control its state (including the selected item) from a parent component.

Here's an example of how you might set up a controlled Combobox with a default selection and autocomplete enabled:

import React, { useState } from 'react';
import { Combobox } from '@twilio-paste/core/combobox';

const items = ['Option 1', 'Option 2', 'Option 3'];

const ControlledCombobox = () => {
  const [inputValue, setInputValue] = useState('Option 1');
  const [selectedItem, setSelectedItem] = useState('Option 1');

  const handleInputValueChange = ({inputValue}) => {
    setInputValue(inputValue);
  };

  const handleSelectedItemChange = ({selectedItem}) => {
    setSelectedItem(selectedItem);
  };

  return (
    <Combobox
      items={items}
      inputValue={inputValue}
      onInputValueChange={handleInputValueChange}
      selectedItem={selectedItem}
      onSelectedItemChange={handleSelectedItemChange}
    />
  );
};

export default ControlledCombobox;

In this example, the inputValue and selectedItem states are initialized with 'Option 1', which sets the default selection in the Combobox. The onInputValueChange and onSelectedItemChange props are used to update the inputValue and selectedItem states when the user types in the Combobox or selects an item from the dropdown, respectively.

As for the dropdown arrow disappearing, this might be a specific implementation detail or a styling choice. The Combobox should still function with both a default selection and autocomplete enabled. If you're experiencing issues with the dropdown arrow in your implementation, you may want to check the Combobox's styling or reach out for support with your specific use case.

For more information on the Combobox component and its properties, you can visit the Combobox documentation on the Paste website.

I hope this helps! If you have any other questions, feel free to ask.

Sources

• packages/paste-core/components/combobox/tests/combobox-customization.spec.tsx
• packages/paste-core/components/combobox/src/types.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Bots answered correctly here. It is indeed possible :)

[ceyerkes]

thank you!