From 6bfa8f027cdedde3ec065d6f7d3383828f15abab Mon Sep 17 00:00:00 2001 From: bbb169 <827088092@qq.com> Date: Fri, 22 Dec 2023 18:37:04 +0800 Subject: [PATCH 1/4] fix: non-controllable component's options change cause wrong label --- src/Select.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/Select.tsx b/src/Select.tsx index 1b2dc54e..2b9cce3c 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -466,6 +466,24 @@ const Select = React.forwardRef( } }; + // ================ Options change ============ + + React.useEffect(() => { + // When it's a non-controllable component and options change, update values to match the new label. + if (defaultValue === undefined && value === undefined && rawLabeledValues.length && valueOptions.size && rawLabeledValues.find(item => { + const findedOption = valueOptions.get(item.value); + if (findedOption) { + return findedOption.label !== item.label + } + return false + })) { + // should not use triggerChange directly to cause `onChange` event + const values = rawLabeledValues.map(item => valueOptions.get(item.value)); + const labeledValues = convert2LabelValues(values); + setInternalValue(labeledValues); + } + }, [valueOptions]) + // ======================= Accessibility ======================== const [activeValue, setActiveValue] = React.useState(null); const [accessibilityIndex, setAccessibilityIndex] = React.useState(0); From d1066ead3c4da2a586fab88e88d76de2bdc5544e Mon Sep 17 00:00:00 2001 From: bbb169 <827088092@qq.com> Date: Fri, 22 Dec 2023 19:02:13 +0800 Subject: [PATCH 2/4] refactor: add notes to find match label codes --- src/Select.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index 2b9cce3c..740aded1 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -469,18 +469,24 @@ const Select = React.forwardRef( // ================ Options change ============ React.useEffect(() => { - // When it's a non-controllable component and options change, update values to match the new label. - if (defaultValue === undefined && value === undefined && rawLabeledValues.length && valueOptions.size && rawLabeledValues.find(item => { - const findedOption = valueOptions.get(item.value); - if (findedOption) { - return findedOption.label !== item.label + // When it's a non-controllable component and options change. + if (defaultValue === undefined && value === undefined && rawLabeledValues.length && valueOptions.size) { + // check whether if match new label. + const findNotMatchLabel = rawLabeledValues.find(item => { + const findedOption = valueOptions.get(item.value); + if (findedOption) { + return findedOption.label !== item.label + } + return false + }) + + // update values to match the new label. + if (findNotMatchLabel) { + // should not use triggerChange directly to cause `onChange` event + const values = rawLabeledValues.map(item => valueOptions.get(item.value)); + const labeledValues = convert2LabelValues(values); + setInternalValue(labeledValues); } - return false - })) { - // should not use triggerChange directly to cause `onChange` event - const values = rawLabeledValues.map(item => valueOptions.get(item.value)); - const labeledValues = convert2LabelValues(values); - setInternalValue(labeledValues); } }, [valueOptions]) From 780d72cb4ccbc3783fcaebf3858dd89eaf1b7db5 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 28 Dec 2023 04:16:02 +0800 Subject: [PATCH 3/4] Update Select.tsx --- src/Select.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index 740aded1..ba565b58 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -467,17 +467,13 @@ const Select = React.forwardRef( }; // ================ Options change ============ - React.useEffect(() => { // When it's a non-controllable component and options change. if (defaultValue === undefined && value === undefined && rawLabeledValues.length && valueOptions.size) { // check whether if match new label. const findNotMatchLabel = rawLabeledValues.find(item => { const findedOption = valueOptions.get(item.value); - if (findedOption) { - return findedOption.label !== item.label - } - return false + return findedOption ? findedOption.label !== item.label : false; }) // update values to match the new label. @@ -488,7 +484,7 @@ const Select = React.forwardRef( setInternalValue(labeledValues); } } - }, [valueOptions]) + }, [valueOptions]); // ======================= Accessibility ======================== const [activeValue, setActiveValue] = React.useState(null); From 0105589f2cca37625589ec8cbb34c667b1e7e4a5 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 28 Dec 2023 04:17:20 +0800 Subject: [PATCH 4/4] Update Select.tsx --- src/Select.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index ba565b58..91a77eac 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -469,17 +469,21 @@ const Select = React.forwardRef( // ================ Options change ============ React.useEffect(() => { // When it's a non-controllable component and options change. - if (defaultValue === undefined && value === undefined && rawLabeledValues.length && valueOptions.size) { + if ( + defaultValue === undefined && + value === undefined && + rawLabeledValues.length && + valueOptions.size + ) { // check whether if match new label. - const findNotMatchLabel = rawLabeledValues.find(item => { + const findNotMatchLabel = rawLabeledValues.find((item) => { const findedOption = valueOptions.get(item.value); return findedOption ? findedOption.label !== item.label : false; - }) - + }); // update values to match the new label. if (findNotMatchLabel) { // should not use triggerChange directly to cause `onChange` event - const values = rawLabeledValues.map(item => valueOptions.get(item.value)); + const values = rawLabeledValues.map((item) => valueOptions.get(item.value)); const labeledValues = convert2LabelValues(values); setInternalValue(labeledValues); }