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

Select render mismatch with csr(Client Side Render) #5734

Closed
1 task done
wheeljs opened this issue Jun 22, 2022 · 6 comments
Closed
1 task done

Select render mismatch with csr(Client Side Render) #5734

wheeljs opened this issue Jun 22, 2022 · 6 comments

Comments

@wheeljs
Copy link
Contributor

wheeljs commented Jun 22, 2022

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.6

Environment

macOS Monterey version 12.4, Google Chrome Version 102.0.5005.115 (Official Build) (x86_64), [email protected]

Reproduction link

https://stackblitz.com/edit/vitejs-vite-evglmf?file=src%2FApp.vue

Steps to reproduce

  1. Setup a vite with ssr project by 'vite-ssr' module.
  2. Add <a-select mode="multiple"> into component, select multiple options.
  3. Only one selected options in <a-select> has remove icon.

What is expected?

All selected options should have remove icon after its label.

What is actually happening?

Only one selected options in <a-select> has remove icon.


Withour SSR(Works) reproduction link: https://stackblitz.com/edit/vitejs-vite-c6xqfq?file=src%2FApp.vue

I have also fire this issue in vite-ssr repo, ant-design-icons repo. Sorry for my English.

@wheeljs
Copy link
Contributor Author

wheeljs commented Jun 23, 2022

As a workaround, I set removeIcon prop to "X"(character) instead of the default CloseOutlined from @ant-design/icons-vue, then <a-select> renders removeIcon for every selected option correctly. I think this may be an unexpected result with @ant-design/icons-vue not ant-design-vue. <CheckOutlined> in select options popover also have this problem.
Reproduction link: https://stackblitz.com/edit/vitejs-vite-wpikk1?file=src%2FApp.vue

@tangjinzhou
Copy link
Member

应该是 vite-ssr 问题
它不支持 export { default }

@wheeljs
Copy link
Contributor Author

wheeljs commented Jun 24, 2022

应该是 vite-ssr 问题 它不支持 export { default }

Thanks for your replying, is there have any workaround?

@github-actions
Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

@vcasy
Copy link

vcasy commented Nov 26, 2022

应该是 vite-ssr 问题 它不支持 export { default }

This is not the issue.
Proof - this will not work (with vite ssr):

  1. create a very simple component
  2. use it in the icon slot
<a-select
mode="tags"
:options="options" 
>
  <template #removeIcon>
    <SimpleComponent />
  </template 
</a-select>

→ Component in icon slot will not render reliably
However if the slot is something simple like a native HTML Element (for example <button>test</button>) it works.

Somehow vite will not render the HTML content of any component in this slot.
Oddly enough the component itself will be attached correctly according to Vue.js devtools

Tested with the most recent version of vite and ant-design-vue.

Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants