Skip to content
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

[24.2] Do not reorder options in FormSelect component when multiselect disabled #19837

Merged
merged 6 commits into from
Mar 26, 2025
Merged

[24.2] Do not reorder options in FormSelect component when multiselect disabled #19837

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a49d031
Do not reorder options in FormSelect component when multiselect disabled
jdavcs Mar 18, 2025
165cff9
ensure item is checked if selected and is an object with id
ahmedhamidawan Mar 19, 2025
2b29c66
add explicit track by id functionality to `FormSelect`
ahmedhamidawan Mar 20, 2025
0f0b8fe
change multiselect current option highlight to `success` from `danger`
ahmedhamidawan Mar 20, 2025
add040e
change multiselect current option highlight to darkened secondary
ahmedhamidawan Mar 20, 2025
b0a448a
use `itemUniqueKey` instead of just id because those aren't unique
ahmedhamidawan Mar 24, 2025
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
Prev Previous commit
Next Next commit
ensure item is checked if selected and is an object with id
  • Loading branch information
@ahmedhamidawan
ahmedhamidawan committed Mar 19, 2025
commit 165cff939ffed0061d067923154b8e35efe18962
17 changes: 16 additions & 1 deletion client/src/components/Form/Elements/FormSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ const selectedLabel: ComputedRef<string> = computed(() => {
*/
const selectedValues = computed(() => (Array.isArray(props.value) ? props.value : [props.value]));

const selectedIds = computed(() => {
return selectedValues.value.map((v) => (isValueWithId(v) ? v.id : undefined)).filter((v) => v !== undefined);
});

/**
* Tracks current value and emits changes
*/
Expand Down Expand Up @@ -163,9 +167,20 @@ function isValueWithTags(item: SelectValue): item is ValueWithTags {
return item !== null && typeof item === "object" && (item as ValueWithTags).tags !== undefined;
}

function isValueWithId(item: SelectValue): item is { id: string } {
return !!item && typeof item === "object" && (item as { id: string }).id !== undefined;
}

function onSearchChange(search: string): void {
filter.value = search;
}

function isSelected(item: SelectValue): boolean {
if (isValueWithId(item)) {
return selectedIds.value.includes(item.id);
}
return selectedValues.value.includes(item);
}
</script>

<template>
Expand Down Expand Up @@ -200,7 +215,7 @@ function onSearchChange(search: string): void {
:value="option.value.tags"
disabled />
</div>
<FontAwesomeIcon v-if="selectedValues.includes(option.value)" :icon="faCheckSquare" />
<FontAwesomeIcon v-if="isSelected(option.value)" :icon="faCheckSquare" />
<FontAwesomeIcon v-else :icon="faSquare" />
</div>
</template>
Expand Down
Loading