pixiebrix-extension
pixiebrix-extension copied to clipboard
Support multi-select for dropdown in the Form Builder
User Story
- As a Mod Developer, I want a form with a multi-select dropdown so the user can select multiple values
- The existing "Checkboxes (Multi-select)" does not: 1) scale well with a lot of options (e.g., Group Names), and 2) support values/labels
Motivation
- Our announcements mod has an affordance for setting a Group to receive a notice. Notice creators may want to specify multiple groups to receive the notice
Acceptance Criteria
- For "Dropdown" and "Dropdown with labels" field types, include a "Select multiple" toggle
- If selected, underlying JSON Schema should be
type: array - If selected, allow multiple selections in the widget
Example Schema
Is this what the JSON Schema will look like? What will the UiSchema need to look like?
{
type: "object",
properties: {
fruit: {
title: "Fruit",
type: "array",
uniqueItems: true,
items: {
type: "string",
enum: ["apple", "banana", "cherry"],
},
}
}
}
Discussion
- To Decide: introduce new "Input Type" (e.g., "Multi-select Dropdown" and "Multi-select Dropdown with Labels)? Or add as a toggle?
-
RjsfSelectWidgetalready accepts amultipleprop. Does RJSF pass it through if the type is array?
Related Code
- https://github.com/pixiebrix/pixiebrix-extension/blob/c454e5e6ed3553b64328dfd1ef814edb95270bd2/src/components/formBuilder/RjsfSelectWidget.tsx#L35-L35
- https://github.com/pixiebrix/pixiebrix-extension/blob/c454e5e6ed3553b64328dfd1ef814edb95270bd2/src/pageEditor/fields/formFieldTypeOptions.ts#L61-L61