Skip to content

fix(web-forms#864): performance for selects on large entity lists #1750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
garethbowen merged 9 commits into from
Aug 10, 2026
+18 −22
Merged

fix(web-forms#864): performance for selects on large entity lists #1750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
22e3db8
fix(web-forms#864): improve performance for selects on large entity l…
garethbowen Aug 6, 2026
4d500bd
disable lazy loading for jsdom
garethbowen Aug 6, 2026
e87be43
apply performance improvements to multiselect too
garethbowen Aug 6, 2026
2d660ba
changeset
garethbowen Aug 6, 2026
40c7aea
remove lazy loading - high pain, low gain
garethbowen Aug 6, 2026
922bc97
cleanup and copy label performance improvement to multi
garethbowen Aug 6, 2026
a1db42c
remove JSDOM handling code
garethbowen Aug 9, 2026
26fd436
Merge branch 'master' into searchable-dropdown-performance
garethbowen Aug 10, 2026
4a9ce22
Merge branch 'master' into searchable-dropdown-performance
garethbowen Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/young-waves-vanish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@getodk/xforms-engine": patch
"@getodk/web-forms": patch
---

Fixed performance issues when rendering a select with options from a large entity list
14 changes: 6 additions & 8 deletions packages/web-forms/src/components/common/MultiselectDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,12 @@ interface MultiselectDropdownProps {
const t: Translate = inject(TRANSLATE)!;
const props = defineProps<MultiselectDropdownProps>();

const DEFAULT_PRIMEVUE_ITEM_HEIGHT = 38;

defineEmits(['update:modelValue', 'change']);

const options = computed(() => {
return props.question.currentState.valueOptions.map((option) => {
const label = props.question.getValueOption(option.value);
if (label == null) {
throw new Error(`Failed to find option for value: ${option.value}`);

@garethbowen garethbowen Aug 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why we needed this, but it massively slowed down the rendering, because it was doing a n^2 lookup. Do we still need this validation? Is there a better way to do it than on the client every time?

}

return {
value: option.value,
label: option.label.formatted,
Expand All @@ -42,9 +39,9 @@ if (props.question.appearances['no-buttons']) {

const selectedLabels = computed(() => {
const state = props.question.currentState;
return state.value.map((val) => {
const found = state.valueOptions.find((opt) => opt.value === val);
return found?.label.formatted;
return state.value.map((value) => {
const option = props.question.getValueOption(value);
return option?.label.formatted;
});
});
</script>
Expand All @@ -68,6 +65,7 @@ const selectedLabels = computed(() => {
option-label="search"
:panel-class="panelClass"
:model-value="question.currentState.value"
:virtual-scroller-options="{ itemSize: DEFAULT_PRIMEVUE_ITEM_HEIGHT }"
@update:model-value="selectValues"
@change="$emit('change')"
>
Expand Down
13 changes: 5 additions & 8 deletions packages/web-forms/src/components/common/SearchableDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,12 @@ interface SearchableDropdownProps {
const t: Translate = inject(TRANSLATE)!;
const props = defineProps<SearchableDropdownProps>();

const DEFAULT_PRIMEVUE_ITEM_HEIGHT = 38;

defineEmits(['update:modelValue', 'change']);

const options = computed(() => {
return props.question.currentState.valueOptions.map((option) => {
const label = props.question.getValueOption(option.value);
if (label == null) {
throw new Error(`Failed to find option for value: ${option.value}`);
}

return {
value: option.value,
label: option.label.formatted,
Expand All @@ -36,9 +33,8 @@ const selectedLabel = computed(() => {
if (!value) {
return [];
}
const valueOptions = props.question.currentState.valueOptions;
const found = valueOptions.find((opt) => opt.value === value);
return found?.label.formatted;
const option = props.question.getValueOption(value);
return option?.label.formatted;
});

const selectValue = (value: string) => {
Expand All @@ -58,6 +54,7 @@ const selectValue = (value: string) => {
:options="options"
option-label="search"
option-value="value"
:virtual-scroller-options="{ itemSize: DEFAULT_PRIMEVUE_ITEM_HEIGHT }"
@update:model-value="selectValue"
@change="$emit('change')"
>
Expand Down
7 changes: 1 addition & 6 deletions packages/xforms-engine/src/instance/SelectControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,12 +212,7 @@ export class SelectControl

// SelectNode
getValueOption(value: string): SelectItem | null {
// Note: this method is a client-facing convenience API for reading state,
// so it **MUST** read from client-reactive state!
const valueOption = this.currentState.valueOptions.find((item) => {
return item.value === value;
});

const valueOption = this.mapOptionsByValue().get(value);

@garethbowen garethbowen Aug 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to work, and is far faster than scanning through each of the valueOptions. The comment above is concerning though and makes me think I might have missed something.

return valueOption ?? null;
}

Expand Down
Loading