pixiebrix-extension icon indicating copy to clipboard operation
pixiebrix-extension copied to clipboard

Support multi-select for dropdown in the Form Builder

Open twschiller opened this issue 1 year ago • 0 comments

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?
  • RjsfSelectWidget already accepts a multiple prop. 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

twschiller avatar May 07 '24 02:05 twschiller