Reproduction link
https://github.com/AbdulWahabRaza123/ant-design-issue
Steps to reproduce
- Run the project after installing the node modules.
- Navigate to http://localhost:3000/en/admin/home and check that the selector does not display the active value even though dom containing the value label.
- Go to the dashboard and refresh the tab; now you can observe that the value label starts showing. However, when you redirect back to the home, the selector will once again not display the value label.
What is expected?
Expectedly, active value should be shown in the selector with an image.
What is actually happening?
I am experiencing a bug in Ant Design. The scenario is as follows: I have a 3 to 4-page application where a shared Select component is utilized. The selector works fine on every page except the home page. The active or changed value label doesn't display in selector on the home page but does on other pages. Interestingly, when I redirect from the home page to any other page, the issue starts occurring on those pages as well. This is happening even though the active value label is correctly present in the DOM. Additionally, I am using an image with text as a label in the Select option.
I have resolved this issue by changing below given class styling from absolute to relative in the global.css
.select-icons {
position:relative !important;
}
| Environment | Info |
| ------------ | ------------ |
| antd | 5.13.3 |
| React | 18.2.0^ |
| System | G3 core i5 8GB RAM |
| Browser | brave 1.61.120 |
4条答案
按热度按时间chy5wohz1#
Your project does not have a
package.jsonfile, and I couldn't run it.rm5edbpk2#
https://github.com/AbdulWahabRaza123/ant-design-issuecode has been updated. Now you can test the scenario.
kq4fsx7k3#
Could you provide a sceenshot? I cannot find the Select which you referred to.
vwhgwdsa4#
File:
src/app/[lng]/admin/homeRoute:
localhost:3000/en/admin/homeSelect Location in File:
src/app/[lng]/admin/BasicLayout.js(having a select component which is common for admin pages)I am having a problem with the select at the home location, where it is not displaying the active option or value. If we redirect directly from the home page to the dashboard, then the problem remains the same. However, if we reload the dashboard page again, the select active value starts showing again. But if we redirect back to the home page, then the problem starts occurring again. (The DOM is having the label in the correct manner. I have resolved the error, but I am just helping Ant Design in improving. Furthermore, I have commented the code in global.css which was resolving this issue.)