Merge branch 'forms/1.0.26-folder-chooser-display-all'

Author: dwertheimer

dwertheimer.Forms/CHANGELOG.md

@@ -4,6 +4,29 @@
 
 See Plugin [README](https://github.com/NotePlan/plugins/blob/main/dwertheimer.Forms/README.md) for details on available commands and use case.
 
+## [1.0.26] 2026-02-08 @dwertheimer
+
+### Added
+- **Frontmatter Key Chooser value separator**: When not returning as array, the Frontmatter Key Chooser supports a `valueSeparator` option: `comma` (value1,value2), `commaSpace` (value1, value2 — default for readability), or `space` (value1 value2). Form Builder includes a Value Separator dropdown; type definitions, renderer, test examples, and docs updated.
+
+### Fixed
+- **FolderChooser displays all folders**: Folder chooser (e.g. in form fields) now shows all folders instead of the default 25. Uses `maxResults: 0` so the dropdown shows the full list with scrolling.
+- **SpaceChooser WebView error (isMounted)**: Fixed `ReferenceError: Can't find variable: isMounted` in SpaceChooser. The `useEffect` referenced `isMounted` which was only defined inside `loadSpaces`; added `isMountedRef` and proper mount tracking (matches FolderChooser, TagChooser, MentionChooser pattern).
+- **SpaceChooser Private option displays blank**: Selecting "Private" (id: empty string) in the space chooser now correctly shows "Private" in the text field instead of blank. SearchableChooser previously skipped the display lookup when `displayValue` was falsy (empty string); now allows lookup when `value` is set (including `''` for empty-id items).
+
+### Edited in this release
+- `helpers/react/DynamicDialog/FolderChooser.jsx` — Set `maxResults: 0` in SearchableChooser config so all folders are shown (unlimited, scroll).
+- `helpers/react/DynamicDialog/SpaceChooser.jsx` — Added `isMountedRef` and mount-tracking effect; replaced `isMounted` references with `isMountedRef.current` in `loadSpaces` and load effect.
+- `helpers/react/DynamicDialog/SearchableChooser.jsx` — Allow display-value lookup when `value` is `''` (not just truthy); condition changed from `displayValue && ...` to `value !== undefined && value !== null && ...`.
+- `helpers/react/DynamicDialog/ContainedMultiSelectChooser.jsx` — Added `valueSeparator` prop (`'comma'` | `'commaSpace'` | `'space'`) and join/parse logic for string output.
+- `helpers/react/DynamicDialog/FrontmatterKeyChooser.jsx` — Added `valueSeparator` prop, default `'commaSpace'`; pass-through to ContainedMultiSelectChooser.
+- `helpers/react/DynamicDialog/DynamicDialog.jsx` — Added `valueSeparator` to TSettingItem.
+- `helpers/react/DynamicDialog/dialogElementRenderer.js` — Extract and pass `valueSeparator` for frontmatter-key-chooser.
+- `dwertheimer.Forms/src/components/FieldEditor.jsx` — Value Separator dropdown for frontmatter-key-chooser (comma / comma+space / space).
+- `dwertheimer.Forms/src/FormFieldRenderTest.js` — valueSeparator examples (commaSpace, space, comma).
+- `helpers/react/DynamicDialog/CREATING_NEW_DYNAMICDIALOG_FIELD_TYPES.md` — Documented valueSeparator; Form Item Editor and test examples.
+- `dwertheimer.Forms/README.md` — frontmatter-key-chooser JSON example with valueSeparator.
+
 ## [1.0.25] 2026-02-06 @dwertheimer
 
 ### Merged

dwertheimer.Forms/README.md

@@ -681,7 +681,8 @@ All fields support these properties:
   label: 'Status',
   type: 'frontmatter-key-chooser',
   frontmatterKey: 'status', // which frontmatter key to search
-  returnAsArray: false
+  returnAsArray: false,
+  valueSeparator: 'commaSpace' // when string: 'comma' | 'commaSpace' | 'space' (default: commaSpace)
 }
 ```
 

dwertheimer.Forms/plugin.json

@@ -4,9 +4,9 @@
   "noteplan.minAppVersion": "3.4.0",
   "plugin.id": "dwertheimer.Forms",
   "plugin.name": "📝 Template Forms",
-  "plugin.version": "1.0.25",
+  "plugin.version": "1.0.26",
   "plugin.releaseStatus": "beta",
-  "plugin.lastUpdateInfo": "Merge fix branch: conditional-values/button-group default, Form Browser overlay, simplified submit response; plus 1.0.24 (Processing Template dropdown, GenericDatePicker Safari, formProcessorTitle eliminated).",
+  "plugin.lastUpdateInfo": "FolderChooser now shows all folders. Frontmatter Key Chooser supports valueSeparator option -- space, comma, or commaSpace. Thx @jgclark!",
   "plugin.description": "Dynamic Forms for NotePlan using Templating -- fill out a multi-field form and have the data sent to a template for processing",
   "plugin.author": "dwertheimer",
   "plugin.requiredFiles": ["react.c.FormView.bundle.dev.js", "react.c.FormBuilderView.bundle.dev.js", "react.c.FormBrowserView.bundle.dev.js"],

dwertheimer.Forms/src/FormFieldRenderTest.js

@@ -1282,12 +1282,37 @@ export async function testFormFieldRender(): Promise<void> {
       },
       {
         type: 'frontmatter-key-chooser',
-        label: 'Frontmatter Key Chooser (Fixed Key: "status")',
+        label: 'Frontmatter Key Chooser (Fixed Key: "status", comma+space)',
         key: 'testFrontmatterKeyChooser',
         frontmatterKey: 'status',
         placeholder: 'Type to search values...',
-        description: 'Multi-select chooser for frontmatter key values. Returns comma-separated string like "value1,value2". Key is fixed to "status".',
+        description: 'Multi-select chooser for frontmatter key values. Returns string like "value1, value2" (valueSeparator: commaSpace). Key is fixed to "status".',
         returnAsArray: false,
+        valueSeparator: 'commaSpace',
+        noteType: 'All',
+        caseSensitive: false,
+      },
+      {
+        type: 'frontmatter-key-chooser',
+        label: 'Frontmatter Key Chooser (Fixed Key: "status", space-separated)',
+        key: 'testFrontmatterKeyChooserSpace',
+        frontmatterKey: 'status',
+        placeholder: 'Type to search values...',
+        description: 'Same as above but valueSeparator: space — returns "value1 value2".',
+        returnAsArray: false,
+        valueSeparator: 'space',
+        noteType: 'All',
+        caseSensitive: false,
+      },
+      {
+        type: 'frontmatter-key-chooser',
+        label: 'Frontmatter Key Chooser (Fixed Key: "status", comma no space)',
+        key: 'testFrontmatterKeyChooserComma',
+        frontmatterKey: 'status',
+        placeholder: 'Type to search values...',
+        description: 'Same but valueSeparator: comma — returns "value1,value2" (no space after comma).',
+        returnAsArray: false,
+        valueSeparator: 'comma',
         noteType: 'All',
         caseSensitive: false,
       },

dwertheimer.Forms/src/components/FieldEditor.jsx

@@ -1549,7 +1549,23 @@ export function FieldEditor({ field, allFields, onSave, onCancel, requestFromPlu
                   />
                   Return as Array
                 </label>
-                <div className="field-editor-help">If checked, returns selected values as an array. Otherwise, returns as comma-separated string.</div>
+                <div className="field-editor-help">If checked, returns selected values as an array. Otherwise, returns as string (format set by Value Separator below).</div>
+              </div>
+              <div className="field-editor-row">
+                <label>Value Separator (when not returning array):</label>
+                <select
+                  value={((editedField: any): { valueSeparator?: string }).valueSeparator || 'commaSpace'}
+                  onChange={(e) => {
+                    const updated = { ...editedField }
+                    ;(updated: any).valueSeparator = e.target.value || undefined
+                    setEditedField(updated)
+                  }}
+                >
+                  <option value="comma">Comma (no space) — value1,value2</option>
+                  <option value="commaSpace">Comma with space — value1, value2</option>
+                  <option value="space">Space — value1 value2</option>
+                </select>
+                <div className="field-editor-help">How to join multiple selected values when not returning as array. Comma with space is default for readability.</div>
               </div>
               <div className="field-editor-row">
                 <label>

helpers/react/DynamicDialog/CREATING_NEW_DYNAMICDIALOG_FIELD_TYPES.md

@@ -52,6 +52,7 @@ export type TSettingItem = {
 - `includePattern?: string`
 - `excludePattern?: string`
 - `returnAsArray?: boolean`
+- `valueSeparator?: 'comma' | 'commaSpace' | 'space'` (for string output: comma, comma+space, or space-separated)
 - `defaultChecked?: boolean`
 - `maxHeight?: string`
 
@@ -278,7 +279,7 @@ If your field has custom properties that need to be edited in the Form Builder,
 ) : null}
 ```
 
-Look for similar patterns in the file for other field types to see how to add editor UI.
+For `frontmatter-key-chooser`, the Form Item Editor includes a **Value Separator** dropdown (when not returning as array): Comma (no space), Comma with space, or Space. Look for similar patterns in the file for other field types to see how to add editor UI.
 
 ### 7. Test/Examples
 
@@ -315,6 +316,15 @@ Add examples to the `testFormFields` array. Create a new heading/section for you
   description: 'Example returning array format',
   returnAsArray: true,
 },
+{
+  type: 'your-new-type',
+  label: 'Your New Chooser (Comma+space string)',
+  key: 'testYourNewChooserCommaSpace',
+  placeholder: 'Type to search...',
+  description: 'Example with valueSeparator: commaSpace (e.g. "a, b, c")',
+  returnAsArray: false,
+  valueSeparator: 'commaSpace',
+},
 // ... add more examples for each important parameter
 ```
 
@@ -324,8 +334,8 @@ Add examples to the `testFormFields` array. Create a new heading/section for you
 - Include examples for:
   - Basic usage
   - Each custom property/parameter
-  - Different return formats (string vs array, if applicable)
-  - Different states (default checked, with filters, etc.)
+- Different return formats (string vs array, if applicable) and string separator options (`valueSeparator`: comma, commaSpace, space) for choosers that support it (e.g. `frontmatter-key-chooser`)
+- Different states (default checked, with filters, etc.)
 - Use descriptive keys like `testYourNewChooser`, `testYourNewChooserCustom`, etc.
 - Include helpful descriptions explaining what each example demonstrates
 
@@ -351,7 +361,7 @@ The `tag-chooser` and `mention-chooser` field types serve as complete reference
 2. **Dynamic Data Loading**: Both load data via `requestFromPlugin('getHashtags')` / `requestFromPlugin('getMentions')`
 3. **Memoization**: `getItemDisplayLabel` functions are wrapped in `useCallback`
 4. **Prefix Handling**: Components handle adding/removing prefixes (`#` for tags, `@` for mentions)
-5. **Return Formats**: Support both string (comma-separated) and array return formats via `returnAsArray` prop
+5. **Return Formats**: Support both string and array return formats via `returnAsArray` prop. When returning a string, `valueSeparator` controls how multiple values are joined: `'comma'` (no space), `'commaSpace'` (comma + space for readability), or `'space'` (space-separated).
 6. **Default State**: Support `defaultChecked` to pre-select all items
 7. **Filtering**: Support `includePattern` and `excludePattern` for regex-based filtering
 
@@ -399,7 +409,7 @@ After creating your new field type, verify:
 - [ ] Request handler is added to `handleRequest` switch (if needed)
 - [ ] Field type is added to `FIELD_TYPES` array
 - [ ] Editor UI is added to `FieldEditor` (if custom properties)
-- [ ] Examples are added to `FormFieldRenderTest.js`
+- [ ] Examples are added to `FormFieldRenderTest.js` (including valueSeparator variants if the field returns a string of multiple values)
 - [ ] Component handles loading/error/empty states
 - [ ] Component properly memoizes functions (if needed) - note: `requestFromPlugin` is already memoized in parent
 - [ ] Component passes `requestFromPlugin` if needed

helpers/react/DynamicDialog/ContainedMultiSelectChooser.jsx

@@ -17,7 +17,8 @@ export type ContainedMultiSelectChooserProps = {
   placeholder?: string,
   items: Array<string>, // Array of item strings (without prefix)
   getItemDisplayLabel: (item: string) => string, // Function to format item for display (e.g., add # or @ prefix)
-  returnAsArray?: boolean, // If true, return as array, otherwise return as comma-separated string (default: false)
+  returnAsArray?: boolean, // If true, return as array, otherwise return as string (default: false)
+  valueSeparator?: 'comma' | 'commaSpace' | 'space', // When returnAsArray false: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated (default: 'comma')
   defaultChecked?: boolean, // If true, all items checked by default (default: false)
   includePattern?: string, // Regex pattern to include items
   excludePattern?: string, // Regex pattern to exclude items
@@ -52,6 +53,7 @@ export function ContainedMultiSelectChooser({
   items,
   getItemDisplayLabel,
   returnAsArray = false,
+  valueSeparator = 'comma',
   defaultChecked = false,
   includePattern = '',
   excludePattern = '',
@@ -79,6 +81,13 @@ export function ContainedMultiSelectChooser({
   // Generate unique input id - use fieldKey if provided, otherwise fallback to fieldType with random suffix
   const inputId = fieldKey ? `${fieldType}-${fieldKey}-search` : `${fieldType}-search-${Math.random().toString(36).substr(2, 9)}`
 
+  // String separator for joining selected values when returnAsArray is false
+  const joinSeparator = useMemo((): string => {
+    if (valueSeparator === 'commaSpace') return ', '
+    if (valueSeparator === 'space') return ' '
+    return ','
+  }, [valueSeparator])
+
   // Filter items based on include/exclude patterns
   const filteredItems = useMemo(() => {
     let filtered = [...items]
@@ -120,13 +129,13 @@ export function ContainedMultiSelectChooser({
       defaultInitializedRef.current = true
       // Format and store the value we just set
       const formattedItems = filtered.map((item: string) => getItemDisplayLabel(item))
-      const newValue: string | Array<string> = returnAsArray ? formattedItems : formattedItems.join(',')
+      const newValue: string | Array<string> = returnAsArray ? formattedItems : formattedItems.join(joinSeparator)
       lastSyncedValueRef.current = newValue
       // Call onChange to notify parent component of the initial value
       onChange(newValue)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filteredItems.length, defaultChecked, value, returnAsArray]) // Only check filteredItems.length, not filteredItems itself. onChange/getItemDisplayLabel are stable or handled elsewhere
+  }, [filteredItems.length, defaultChecked, value, returnAsArray, joinSeparator]) // Only check filteredItems.length, not filteredItems itself. onChange/getItemDisplayLabel are stable or handled elsewhere
 
   // Parse value prop to get selected values and sync selectedValues
   // Only sync from value prop if it's different from what we last synced (to avoid loops)
@@ -181,8 +190,11 @@ export function ContainedMultiSelectChooser({
         // Remove duplicates
         parsed = Array.from(new Set(cleaned))
       } else {
-        // If string, split by comma and extract item names
-        const itemList = value.split(',').map((item: string) => item.trim()).filter(Boolean)
+        // If string, split by comma or whitespace depending on valueSeparator
+        const itemList =
+          valueSeparator === 'space'
+            ? value.split(/\s+/).map((item: string) => item.trim()).filter(Boolean)
+            : value.split(',').map((item: string) => item.trim()).filter(Boolean)
         const cleaned = itemList.map((item: string) => {
           let cleanedItem = item
           while (cleanedItem.startsWith('#') || cleanedItem.startsWith('@')) {
@@ -199,7 +211,7 @@ export function ContainedMultiSelectChooser({
     setSelectedValues(parsed)
     // Update ref to track what we synced
     lastSyncedValueRef.current = value
-  }, [value, defaultChecked, returnAsArray, singleValue]) // Only sync from value prop to prevent resetting selections
+  }, [value, defaultChecked, returnAsArray, singleValue, valueSeparator]) // Only sync from value prop to prevent resetting selections
 
   // Calculate effective maxHeight: height prop > maxRows > maxHeight
   const effectiveMaxHeight = useMemo(() => {
@@ -319,8 +331,8 @@ export function ContainedMultiSelectChooser({
       setSelectedValues(newSelected)
       // Return format based on returnAsArray prop
       // If returnAsArray is true, return original item values (not formatted labels)
-      // If returnAsArray is false, return formatted display labels joined by comma
-      const newValue = returnAsArray ? newSelected : newSelected.map((item: string) => getItemDisplayLabel(item)).join(',')
+      // If returnAsArray is false, return formatted display labels joined by valueSeparator
+      const newValue = returnAsArray ? newSelected : newSelected.map((item: string) => getItemDisplayLabel(item)).join(joinSeparator)
       // Update ref before calling onChange to prevent re-sync
       lastSyncedValueRef.current = newValue
       onChange(newValue)
@@ -365,7 +377,7 @@ export function ContainedMultiSelectChooser({
     const allValues = Array.from(new Set(displayItems)).filter((item: string) => item.toLowerCase() !== 'is:checked')
     setSelectedValues(allValues)
     const formattedItems = allValues.map((item: string) => getItemDisplayLabel(item))
-    const newValue = returnAsArray ? formattedItems : formattedItems.join(',')
+    const newValue = returnAsArray ? formattedItems : formattedItems.join(joinSeparator)
     // Update ref before calling onChange to prevent re-sync
     lastSyncedValueRef.current = newValue
     onChange(newValue)
@@ -459,8 +471,8 @@ export function ContainedMultiSelectChooser({
 
       // Format and update value via onChange
       const formattedItems = newSelected.map((item: string) => getItemDisplayLabel(item))
-      const newValue: string | Array<string> = returnAsArray ? formattedItems : formattedItems.join(',')
-      logDebug('ContainedMultiSelectChooser', `[CREATE MODE] Calling onChange with: ${typeof newValue === 'string' ? newValue : newValue.join(',')}`)
+      const newValue: string | Array<string> = returnAsArray ? formattedItems : formattedItems.join(joinSeparator)
+      logDebug('ContainedMultiSelectChooser', `[CREATE MODE] Calling onChange with: ${typeof newValue === 'string' ? newValue : newValue.join(joinSeparator)}`)
 
       lastSyncedValueRef.current = newValue
       onChange(newValue)

helpers/react/DynamicDialog/DynamicDialog.jsx

@@ -206,6 +206,7 @@ export type TSettingItem = {
   allowCreate?: boolean, // for tag-chooser and mention-chooser, if true, show "+New" button to create new items (default: true)
   singleValue?: boolean, // for tag-chooser, mention-chooser, and frontmatter-key-chooser, if true, allow selecting only one value (no checkboxes, returns single value) (default: false)
   renderAsDropdown?: boolean, // for tag-chooser, mention-chooser, and frontmatter-key-chooser, if true and singleValue is true, render as dropdown-select instead of filterable chooser (default: false)
+  valueSeparator?: 'comma' | 'commaSpace' | 'space', // for frontmatter-key-chooser (and choosers using ContainedMultiSelectChooser): when returnAsArray false, how to join values: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated
   // frontmatter-key-chooser options
   frontmatterKey?: string, // for frontmatter-key-chooser, the frontmatter key to get values for (can be fixed or from sourceKeyKey)
   sourceKeyKey?: string, // Value dependency: for frontmatter-key-chooser, key of another field to get the frontmatter key from dynamically

helpers/react/DynamicDialog/FolderChooser.jsx

@@ -491,7 +491,7 @@ export function FolderChooser({
     iconClass: 'fa-solid fa-folder',
     fieldType: 'folder-chooser',
     debugLogging: true,
-    maxResults: 25,
+    maxResults: 0, // 0 = show all folders (unlimited, scroll)
     inputMaxLength: 100,
     dropdownMaxLength: 80,
     // Add Option-click support for creating subfolders