- Updated the CategoryPicker and CategoryTree with the ability to select the first option by default.

Author: maxwelleley

Rock.JavaScript.Obsidian.Blocks/src/Example/ControlGallery/categoryPickerGallery.partial.obs

@@ -3,13 +3,18 @@
                       :importCode="importCode"
                       :exampleCode="exampleCode"
                       enableReflection>
-        <CategoryPicker label="Category Picker" v-model="value" :multiple="multiple" :entityTypeGuid="entityTypeGuid" />
+        <CategoryPicker label="Category Picker"
+                        v-model="value"
+                        :multiple="multiple"
+                        :entityTypeGuid="entityTypeGuid"
+                        :selectFirstByDefault="selectFirstByDefault" />
 
         <template #settings>
 
             <div class="row">
                 <div class="col-md-6">
                     <CheckBox label="Multiple" v-model="multiple" />
+                    <CheckBox label="Select First By Default" v-model="selectFirstByDefault" />
                 </div>
                 <div class="col-md-6">
                     <EntityTypePicker label="For Entity Type" v-model="entityType" enhanceForLongLists showBlankItem />
@@ -39,7 +44,8 @@
         return toGuidOrNull(entityType?.value?.value) ?? undefined;
     });
     const multiple = ref(false);
+    const selectFirstByDefault = ref(false);
     const value = ref(null);
     const importCode = getSfcControlImportPath("categoryPicker");
     const exampleCode = `<CategoryPicker label="Category Picker" v-model="value" :multiple="false" :entityTypeGuid="entityTypeGuid" />`;
-</script>
+</script>

Rock.JavaScript.Obsidian.Blocks/src/Example/ControlGallery/categoryTreeGallery.partial.obs

@@ -4,7 +4,11 @@
                       :exampleCode="exampleCode"
                       enableReflection>
 
-        <CategoryTree v-model="value" :multiple="multiple" :entityTypeGuid="entityTypeGuid" :enableDeselect="enableDeselect" />
+        <CategoryTree v-model="value"
+                      :multiple="multiple"
+                      :entityTypeGuid="entityTypeGuid"
+                      :enableDeselect="enableDeselect"
+                      :selectFirstByDefault="selectFirstByDefault" />
 
         <template #settings>
             <div class="row">
@@ -13,6 +17,7 @@
                 </div>
                 <div class="col-md-4">
                     <CheckBox label="Enable Deselection" v-model="enableDeselect" />
+                    <CheckBox label="Select First By Default" v-model="selectFirstByDefault" />
                 </div>
                 <div class="col-md-4">
                     <EntityTypePicker label="For Entity Type" v-model="entityType" enhanceForLongLists showBlankItem />
@@ -96,6 +101,13 @@
                         <td>200px</td>
                         <td>CSS length value for defining how tall the box is.</td>
                     </tr>
+                    <tr>
+                        <td><code>selectFirstByDefault</code></td>
+                        <td>Boolean</td>
+                        <td>false</td>
+                        <td>When true, the first item in the list will be automatically selected if no other item is
+                            currently selected.</td>
+                    </tr>
                 </tbody>
             </table>
         </template>
@@ -120,7 +132,8 @@
 
     const multiple = ref(false);
     const enableDeselect = ref(false);
+    const selectFirstByDefault = ref(false);
     const value = ref(null);
     const importCode = getSfcControlImportPath("categoryTree");
     const exampleCode = computed(() => `<CategoryTree v-model="value"${multiple.value ? " multiple" : ""}${entityTypeGuid.value ? ` entityTypeGuid="${entityTypeGuid.value}"` : ""} />`);
-</script>
+</script>

Rock.JavaScript.Obsidian/Framework/Controls/categoryPicker.obs

@@ -4,6 +4,7 @@
                     formGroupClasses="category-picker"
                     iconCssClass="ti ti-folder-open"
                     :provider="itemProvider"
+                    :selectFirstByDefault="selectFirstByDefault"
                     autoExpand
                     :multiple="multiple" />
 </template>
@@ -46,6 +47,15 @@
         multiple: {
             type: Boolean as PropType<boolean>,
             default: false
+        },
+
+        /**
+         * When true, the first item in the list will be automatically selected
+         * if no other item is currently selected.
+         */
+        selectFirstByDefault: {
+            type: Boolean as PropType<boolean>,
+            default: false
         }
     });
 
@@ -83,6 +93,8 @@
 
         // Set the provider to the new one
         itemProvider.value = newProvider;
+
+        internalValue.value = null;
     });
 
     watch(internalValue, () => {

Rock.JavaScript.Obsidian/Framework/Controls/categoryTree.obs

@@ -8,6 +8,7 @@
                   @update:modelValue="onSelect"
                   :disableFolderSelection="disableFolderSelection"
                   :showChildCount="showChildCount"
+                  :selectFirstByDefault="selectFirstByDefault"
                   :enableDeselect="enableDeselect"
                   autoExpand />
     </div>
@@ -90,6 +91,15 @@
         enableDeselect: {
             type: Boolean,
             default: false
+        },
+
+        /**
+         * When true, the first item in the list will be automatically selected
+         * if no other item is currently selected.
+         */
+        selectFirstByDefault: {
+            type: Boolean as PropType<boolean>,
+            default: false
         }
     });
 
@@ -225,5 +235,13 @@
 
         // Set the provider to the new one
         itemProvider.value = newProvider;
+
+        internalValues.value = [];
+        if (props.multiple) {
+            emit("update:modelValue", []);
+        }
+        else {
+            emit("update:modelValue", null);
+        }
     });
 </script>

Rock.JavaScript.Obsidian/Framework/Controls/treeItemPicker.obs

@@ -18,6 +18,7 @@
                   :disableFolderSelection="disableFolderSelection"
                   :autoExpand="autoExpand"
                   :showChildCount="showChildCount"
+                  :selectFirstByDefault="selectFirstByDefault"
                   :isVisible="internalShowPopup" />
 
         <template #innerLabel><span class="selected-names">{{ selectedNames || blankValue }}</span></template>
@@ -131,6 +132,15 @@
             type: String as PropType<string>,
             default: ""
         },
+
+        /**
+         * When true, the first item in the list will be automatically selected
+         * if no other item is currently selected.
+         */
+        selectFirstByDefault: {
+            type: Boolean as PropType<boolean>,
+            default: false
+        }
     });
 
     const emit = defineEmits<{

Rock.JavaScript.Obsidian/Framework/Controls/treeList.obs

@@ -94,6 +94,15 @@
         enableDeselect: {
             type: Boolean,
             default: false
+        },
+
+        /**
+         * When true, the first item in the list will be automatically selected
+         * if no other item is currently selected.
+         */
+        selectFirstByDefault: {
+            type: Boolean as PropType<boolean>,
+            default: false
         }
     });
 
@@ -135,6 +144,7 @@
 
             await nextTick();
             scrollToSelectedItem();
+            trySelectFirst();
         }
     };
 
@@ -211,11 +221,39 @@
         }
     };
 
+    /**
+     * Attempts to select the first item if selectFirstByDefault is true and
+     * no item is currently selected.
+     */
+    const trySelectFirst = (): void => {
+        if (!props.selectFirstByDefault || props.modelValue.length > 0 || internalItems.value.length === 0) {
+            return;
+        }
+
+        let itemToSelect: TreeItemBag | null = null;
+
+        for (const item of internalItems.value) {
+            if (props.disableFolderSelection && (item.isFolder || item.hasChildren)) {
+                continue;
+            }
+
+            if (item.value) {
+                itemToSelect = item;
+                break;
+            }
+        }
+
+        if (itemToSelect && itemToSelect.value) {
+            emit("update:modelValue", [itemToSelect.value]);
+        }
+    };
+
     // Watch for a change in our passed items and update our internal list.
     watch(() => props.items, () => {
         // Only update if we don't have a provider.
         if (!props.provider) {
             internalItems.value = props.items ?? [];
+            trySelectFirst();
         }
     });