diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 94d4f2b768..3eb1add267 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -12,6 +12,7 @@
export let getOptionValue = option => option
export let readonly = false
export let autocomplete = false
+ export let sort = false
const dispatch = createEventDispatcher()
$: selectedLookupMap = getSelectedLookupMap(value)
@@ -83,4 +84,5 @@
{getOptionLabel}
{getOptionValue}
onSelectOption={toggleOption}
+ {sort}
/>
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index de7bfb02b8..8acbc4e1a6 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -25,11 +25,12 @@
export let quiet = false
export let autoWidth = false
export let autocomplete = false
+ export let sort = false
const dispatch = createEventDispatcher()
let searchTerm = null
- $: sortedOptions = getSortedOptions(options, getOptionLabel)
+ $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
$: filteredOptions = getFilteredOptions(
sortedOptions,
searchTerm,
@@ -45,10 +46,13 @@
open = true
}
- const getSortedOptions = (options, getLabel) => {
+ const getSortedOptions = (options, getLabel, sort) => {
if (!options?.length || !Array.isArray(options)) {
return []
}
+ if (!sort) {
+ return options
+ }
return options.sort((a, b) => {
const labelA = getLabel(a)
const labelB = getLabel(b)
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 3a2daf25cf..413b11dd34 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -15,6 +15,7 @@
export let quiet = false
export let autoWidth = false
export let autocomplete = false
+ export let sort = false
const dispatch = createEventDispatcher()
let open = false
@@ -72,6 +73,7 @@
{getOptionIcon}
{fieldIcon}
{autocomplete}
+ {sort}
isPlaceholder={value == null || value === ""}
placeholderOption={placeholder}
isOptionSelected={option => option === value}
diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte
index 1bb0039914..957dcccddf 100644
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@@ -13,6 +13,7 @@
export let options = []
export let getOptionLabel = option => option
export let getOptionValue = option => option
+ export let sort = false
const dispatch = createEventDispatcher()
const onChange = e => {
@@ -29,6 +30,7 @@
{value}
{options}
{placeholder}
+ {sort}
{getOptionLabel}
{getOptionValue}
on:change={onChange}
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index eecc719a9a..b6547c0a98 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -16,6 +16,7 @@
export let getOptionIcon = option => option?.icon
export let quiet = false
export let autoWidth = false
+ export let sort = false
const dispatch = createEventDispatcher()
const onChange = e => {
@@ -41,6 +42,7 @@
{options}
{placeholder}
{autoWidth}
+ {sort}
{getOptionLabel}
{getOptionValue}
{getOptionIcon}
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 078dbf25b2..0724016679 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -19,6 +19,7 @@
data-cy="{meta.name}-select"
bind:value
options={meta.constraints.inclusion}
+ sort
/>
{:else if type === "datetime"}
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 8ce2ebe7f9..2bbbb471c2 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -153,6 +153,7 @@
label="Display Column"
bind:value={primaryDisplay}
options={fields}
+ sort
/>
{/if}
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 080f09809d..1f3dea137f 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -47,6 +47,7 @@
getOptionValue={row => row._id}
on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
{label}
+ sort
/>
{:else}
row._id}
+ sort
/>
{/if}
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 9f3e4a4557..c5efa6f58d 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -87,6 +87,7 @@
getOptionLabel={flatOptions ? x => x : x => x.label}
getOptionValue={flatOptions ? x => x : x => x.value}
{autocomplete}
+ sort={true}
/>
{:else if optionsType === "radio"}
option._id}
{placeholder}
+ sort={true}
/>
{/if}