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

Open
garethbowen wants to merge 6 commits into
base: master
Choose a base branch
from
+38 −20
Open

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
6 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
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
24 changes: 16 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 @@ -35,16 +32,26 @@ const selectValues = (values: readonly string[]) => {
props.question.selectValues(values);
};

const virtualScrollerOptions = computed(() => {
const isJSDOM = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');
if (isJSDOM) {
return;
}
return {
itemSize: DEFAULT_PRIMEVUE_ITEM_HEIGHT
};
});

@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.

Unfortunately JSDOM completely breaks primevue's expectations, so to get the tests to pass I have to disable the lazy loading.

@latin-panda latin-panda Aug 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Once this is merged: #1755, this piece of code can be deleted. It's worth waiting a bit, since the other PRs are very close to merging.


let panelClass = 'multi-select-dropdown-panel';
if (props.question.appearances['no-buttons']) {
panelClass += ' 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 +75,7 @@ const selectedLabels = computed(() => {
option-label="search"
:panel-class="panelClass"
:model-value="question.currentState.value"
:virtual-scroller-options="virtualScrollerOptions"
@update:model-value="selectValues"
@change="$emit('change')"
>
Expand Down
23 changes: 15 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 @@ -31,14 +28,23 @@ const options = computed(() => {
});
});

const virtualScrollerOptions = computed(() => {
const isJSDOM = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');
if (isJSDOM) {
return;
}
return {
itemSize: DEFAULT_PRIMEVUE_ITEM_HEIGHT
};
});

const selectedLabel = computed(() => {
const value = props.question.currentState?.value?.[0];
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 +64,7 @@ const selectValue = (value: string) => {
:options="options"
option-label="search"
option-value="value"
:virtual-scroller-options="virtualScrollerOptions"
@update:model-value="selectValue"
@change="$emit('change')"
>
Expand Down
5 changes: 1 addition & 4 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 @@ -214,10 +214,7 @@ export class SelectControl
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!

@latin-panda latin-panda Aug 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I think we can remove this comment, it doesn't seem to help much for this case.

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