Autocomplete combobox validation

[jess-watson]

If a user has started typing into an autocomplete combobox but has not selected anything, is it a best practice to "clear" that field when they submit the form, or provide an inline validation error prompting them to select an option? Thanks!

[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.

---

Based on the provided documentation, it's not explicitly stated whether to "clear" the field or provide an inline validation error for an autocomplete combobox when a user submits a form without selecting an option. However, the documentation does emphasize the importance of validation and providing error messages to explain what information is missing or incorrect.

Given this guidance, it would be more aligned with best practices to provide an inline validation error prompting the user to select an option from the autocomplete combobox rather than clearing the field. This approach helps ensure that users are aware of the mistake and understand how to correct it, which is crucial for a good user experience and accessibility.

Here's a snippet related to validation from the documentation:

Validate form fields on form submission.

Validating a form field when the user leaves the current field (on blur) can be helpful to check for syntax errors. However, this can be frustrating to users who tab through controls to navigate a page, and to screen reader users, who might not be able to detect that an error occurred on blur.

Don't prevent form submission by disabling the submit button. A disabled button cannot be detected by assistive technologies. Use error messages to explain what information is missing or incorrect.

For more details on implementing validation and error handling with the Combobox component, you can refer to the Paste design system documentation: Combobox - Paste

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 - continuing with an error (updated: 02/17/2021, similarity score: 85%)
• Combobox + default value & autocomplete? (updated: 02/13/2024, similarity score: 84%)
• Combobox Improvements - Answer (updated: 08/10/2022, similarity score: 84%)

[dosubot[bot]]

🤖

Based on the context provided, the recommended approach for handling validation and error messages with the Combobox component in the Paste design system, especially when a user has started typing into an autocomplete combobox but has not selected an option before submitting the form, involves using state management to control the display of error messages based on the user's interaction with the form.

Here's an illustrative example:

const AutoCompleteComboboxWithValidation = () => {
  const artists = ['The Aces', 'Brandi Carlile', 'Claud', 'Deb Never', 'Hayley Kiyoko', 'Janelle Monáe', 'LP', 'MUNA', 'Sam Smith', 'Years & Years'];
  const [inputItems, setInputItems] = React.useState(artists);
  const [selectedItem, setSelectedItem] = React.useState(null);
  const [hasSubmitted, setHasSubmitted] = React.useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!selectedItem) {
      setHasSubmitted(true); // User has attempted to submit without selecting an option
    } else {
      // Proceed with form submission logic
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Combobox
        autocomplete
        items={inputItems}
        labelText="Select an artist"
        onInputValueChange={({inputValue}) => {
          if (inputValue !== undefined) {
            setInputItems(artists.filter(item => item.toLowerCase().startsWith(inputValue.toLowerCase())));
          }
        }}
        onSelectedItemChange={({selectedItem}) => {
          setSelectedItem(selectedItem);
          if (selectedItem) {
            setHasSubmitted(false); // Reset submission attempt if a valid option is selected
          }
        }}
        helpText={hasSubmitted && !selectedItem ? "Please select an artist from the list." : null}
        hasError={hasSubmitted && !selectedItem}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

render(
  <AutoCompleteComboboxWithValidation />
)

In this example, a form submission handler (handleSubmit) checks if a valid option has been selected from the combobox before proceeding. If not, it sets a state (hasSubmitted) indicating that a submission attempt was made without a valid selection. This state is then used to conditionally render an error message and apply the error state to the combobox by setting the hasError prop based on whether the user has attempted to submit the form without selecting an option.

As for handling user input and selection, the Combobox component in the Paste design system uses a combination of React hooks and components that manage the combobox's state, input changes, item selection, and rendering logic. The useComboboxPrimitive hook provides several utility functions and state variables, such as getComboboxProps, getInputProps, getItemProps, getLabelProps, getMenuProps, and getToggleButtonProps for spreading over the respective elements to handle accessibility and interaction behaviors. State variables like highlightedIndex, isOpen, and selectedItem are used to track the current highlighted item, whether the combobox list is open, and the currently selected item, respectively.

For more details, you can refer to the Combobox component examples and the Combobox primitive stories in the Paste repository.

Sources

• packages/paste-website/src/component-examples/ComboboxExamples.ts
• packages/paste-core/primitives/combobox/stories/index.stories.tsx

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.

[serifluous]

^ what Paste Bot said, but also—without knowing what the intention of the user was (whether they didn't intend to type anything or just forgot to select an option they typed), you might want to go with the safer choice anyway, which is leaving their input and providing an error.