Multiselect Custom Values

[JeebieWeebie]

I am creating a mobile app where the user selects multiple IDs from a list of existing ones however they also need the ability to add a new ID in. The regular select allows the user to create a custom option but im not seeing anything like that in the multiselect. Any plans to add that or any suggestions for a workaround?

[WidleStudioLLP]

Hey @JeebieWeebie

In Retool, I implemented a solution that enables users to select multiple IDs from a Multiselect component and also add custom IDs as needed. To demonstrate this, I created a temporary state variable (tempState1) to hold sample data.

The Multiselect component (multiselect1) is configured to use tempState1.value.ids as its data source and tempState1.value.selectedIDs as its value. Users can see the initial set of selectable IDs in the component.

To allow custom ID input:

• A Text Input component (textInput1) was added for entering new IDs.
• A Button (button1) triggers a JavaScript query (addCustomID) that validates the input, ensures uniqueness, and updates tempState1 with the new ID.
• Upon clicking the button, the Multiselect automatically updates to include and reflect the newly added custom ID (e.g., "ID006").

---

Please review the screenshots and let me know if you need further details or adjustments to the implementation. I can provide the JavaScript query code or additional configuration steps if required.

let currentIDs = tempState1.value.ids || [];
let selectedIDs = tempState1.value.selectedIDs || [];
let newID = textInput2.value.trim();

if (newID && !currentIDs.includes(newID)) {
  let updatedIDs = [...currentIDs, newID];
  let updatedSelectedIDs = [...selectedIDs, newID];

  tempState1.setValue({
    ids: updatedIDs,
    selectedIDs: updatedSelectedIDs
  });

  multiselect1.setValue(updatedSelectedIDs);

  multiselect1.setDisabled(true);
  setTimeout(() => {
    multiselect1.setDisabled(false);
  }, 50);

  textInput2.clearValue();

  utils.showNotification({
    title: 'Success',
    description: `ID ${newID} added successfully!`,
    notificationType: 'success',
    duration: 3
  });
} else {
  utils.showNotification({
    title: 'Error',
    description: newID ? 'ID already exists!' : 'Please enter a valid ID.',
    notificationType: 'error',
    duration: 3
  });
}