Skip to content
This repository was archived by the owner on Jun 28, 2026. It is now read-only.

Fix value prop to keep SelectInput's input as controlled #8048

Merged
melloware merged 2 commits into from
May 28, 2025
Merged

Fix value prop to keep SelectInput's input as controlled #8048

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9461ace
Fix value prop to keep SelectInput's input as controlled
rubenochiavone May 28, 2025
a7ab5b8
Merge branch 'master' into fix/uncontrolled-multiselect-input
melloware May 28, 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
20 changes: 9 additions & 11 deletions components/lib/multiselect/MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -887,21 +887,19 @@ export const MultiSelect = React.memo(
};

const getLabel = () => {
let label;

@rubenochiavone rubenochiavone May 28, 2025

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.

label was always undefined and when getLabel didn't get to inner block (!empty && !props.fixedPlaceholder), the returned value would be undefined causing the input's prop value to also be undefined. That led to react thinking the input was uncontrolled. Afterwards, if anything changes the input's prop value to be non-undefined, react will trigger the uncontrolled to controlled warning.


if (!empty && !props.fixedPlaceholder) {
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value?.length > props.maxSelectedLabels) {
return getSelectedItemsLabel();
}
if (empty || props.fixedPlaceholder) {
return '';
}

if (ObjectUtils.isArray(props.value)) {
return props.value.reduce((acc, value, index) => acc + (index !== 0 ? ', ' : '') + getLabelByValue(value), '');
}
if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value?.length > props.maxSelectedLabels) {
return getSelectedItemsLabel();
}

return '';
if (ObjectUtils.isArray(props.value)) {
return props.value.reduce((acc, value, index) => acc + (index !== 0 ? ', ' : '') + getLabelByValue(value), '');
}

return label;
return '';
};

const getLabelContent = () => {
Expand Down
Loading