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.

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

The select component is in uncontrolled mode. After selecting the value, modify the options, and the label of the value does not follow the modification #45734

Open
ouzhou opened this issue Nov 8, 2023 · 6 comments · May be fixed by react-component/select#1007
Labels
🐛 Bug Ant Design Team had proved that this is a bug. Inactive

Comments

@ouzhou
Copy link

ouzhou commented Nov 8, 2023

Reproduction link

Edit on CodeSandbox

Steps to reproduce

step1: choose any option

step2: click change language button

step3: click select to see options

What is expected?

  <p>
    I hope the selected value should automatically change the language, but
    currently only the option has changed the language
  </p>

What is actually happening?

  <p>
    I hope the selected value should automatically change the language, but
    currently only the option has changed the language
  </p>
Environment Info
antd 5.11.0
React 18.2
System macos
Browser chrome
@ouzhou
Copy link
Author

ouzhou commented Nov 8, 2023

find a solution, just remove undefined determine below

        if (rawLabel === undefined)
              rawLabel = option?.[optionLabelProp || mergedFieldNames.label];
            if (rawKey === undefined) rawKey = option?.key ?? rawValue;

to

     rawLabel = option?.[optionLabelProp || mergedFieldNames.label];
     rawKey = option?.key ?? rawValue;

https://github.com/react-component/select/blob/ec0c6c748a24aa500ede15f1d2aacd0dacf4f63b/src/Select.tsx#L275
https://github.com/react-component/select/blob/ec0c6c748a24aa500ede15f1d2aacd0dacf4f63b/src/Select.tsx#L277

@ouzhou
Copy link
Author

ouzhou commented Nov 8, 2023

because when component re-render, rawLabel and rawKey not be re-assign value

@chenmijiang
Copy link

for controlled components, your usage of the "onChange" method is wrong. It is not a native method. Just pass the value directly, like this:
image

@ouzhou
Copy link
Author

ouzhou commented Nov 9, 2023

i fixed the demo

@MadCcc MadCcc added 🐛 Bug Ant Design Team had proved that this is a bug. and removed unconfirmed labels Nov 10, 2023
@bbb169
Copy link
Contributor

bbb169 commented Dec 22, 2023

image
https://github.com/react-component/select/blob/ec0c6c748a24aa500ede15f1d2aacd0dacf4f63b/src/Select.tsx#L289
本质还是internalValue这个值在select选择的时候会被triggerChange改变,当新的选项刷新试就会走到这个逻辑,要不要在这块增加一个逻辑,如果新旧label不匹配,就更新internalValue为新的值呢

@afc163
Copy link
Member

afc163 commented Dec 22, 2023

@bbb169 思路是可以的,但是最好不要在 convert2LabelValues 里做。convert2LabelValues 最好是个纯函数,不应该加副作用。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Ant Design Team had proved that this is a bug. Inactive
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants