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.

Sign up for GitHub

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

Jump to bottom

[BUG] Ant Design's Tooltip component not showing when used with ImportButton #6631

Open
okaeiz opened this issue Jan 4, 2025 · 6 comments · May be fixed by #6701
Open

[BUG] Ant Design's Tooltip component not showing when used with ImportButton #6631

okaeiz opened this issue Jan 4, 2025 · 6 comments · May be fixed by #6701
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@okaeiz
Copy link
Contributor

okaeiz commented Jan 4, 2025

Describe the bug

I am using ExportButton, CreateButton and ImportButton and I wrap them with Ant Design's Tooltip component. When I hover over the buttons, ExportButton and CreateButton's tooltips are shown. But the ImportButton's tooltip is not shown when hovered. Here's how I am using it:

            <Tooltip title={"بارگذاری"} placement="top">
              <ImportButton
                {...importProps}
                buttonProps={{ icon: <UploadOutlined />, disabled: true}}
                uploadProps={{
                  accept: ".csv,.xls,.xlsx",
                }}
              >
                بارگذاری
              </ImportButton>
            </Tooltip>

Steps To Reproduce

  1. Create an ImportButton component.
  2. Wrap it with Ant Design's Tooltip component.
  3. Hover over the button to check if the tooltip is shown.
  4. It's not.

Expected behavior

I expect all Refine buttons to have the standard behavior when used along with antd components.

Packages

  • @refinedev/core ("^4.56.0")
  • @refinedev/antd ("^5.44.0")
  • antd ("^5.17.0")

Additional Context

This issue might be relevant to #1630.
@okaeiz okaeiz added the bug Something isn't working label Jan 4, 2025
@Samuel-Habib
Copy link

Hey I think I could figure this out, could I be assigned to this issue?

@alicanerdurmaz
Copy link
Member

Hello @Samuel-Habib, I assigned to you. Thanks for improving Refine!

@okaeiz
Copy link
Contributor Author

okaeiz commented Jan 6, 2025

@Samuel-Habib Could you please explain where the problem is? Is the implementation of Refine's ImportButton?

@alicanerdurmaz alicanerdurmaz added the help wanted Extra attention is needed label Feb 18, 2025
@mohit-2003
Copy link

mohit-2003 commented Mar 2, 2025 •
edited
Loading

Hey, I would like to work on this issue. Can you please assign it to me.

mohit-2003 added a commit to mohit-2003/refine that referenced this issue Mar 2, 2025
@mohit-2003
fix(antd): ensure Tooltip works correctly with ImportButton (refinede…
fcabc17 
…v#6631)
@mohit-2003
Copy link

Hello @alicanerdurmaz, The issue occurs because the Tooltip component passes event handlers like onMouseEnter, but they are not applied to the ImportButton. I fixed it by spreading the rest props in the Button and It is working fine. Can I create a PR for this fix?

@arndom
Copy link
Contributor

arndom commented Mar 7, 2025

@mohit-2003 you may as well make the PR since its labelled as help-wanted

@mohit-2003 mohit-2003 linked a pull request Mar 8, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/antd tooltip import button mohit-2003/refine
5 participants
@alicanerdurmaz @arndom @Samuel-Habib @mohit-2003 @okaeiz