[BUG] - Tooltip not working with onClick() Event in custom Table

CyberT33N commented 1 month ago

NextUI Version

2.3.6

Describe the bug

Related to:

https://nextui.org/docs/components/table#custom-styles

I'm not able to define a Tooltip programatically via onClick() event inside of your custom table example. I will pass here the relevant part of my code because posting the full table would be too much code:

export default function TransactionsTable() {
     const [tooltipId, setTooltipId] = useState<string | null>(null)

     const copyAddress = (value: string, id: string) => {
            navigator.clipboard.writeText(value)
            setTooltipId(id)
        }

    const renderCell = useCallback((transaction: Transaction, columnKey: React.Key) => {
            const cellValue = transaction[columnKey as keyof Transaction]

            switch (columnKey) {
            case 'from':
                return (
                    <div className="flex items-center">    
                        <p>{transaction.from.substring(0, 6) + '...'}</p>

                        <Tooltip
                            isOpen={tooltipId === transaction.hash}  
                            content="Copied!">   

                            <button 
                                style={{ marginLeft: '0.2rem' }} 
                                onClick={() => copyAddress(transaction.from, transaction.hash)}
                                className="ml-2 flex items-end">
                                <CopyClipboardIcon />
                            </button>

                        </Tooltip>
                    </div>
                )

            default:
                return cellValue
            }
    }, [tooltipId])
}

The code itself is working. When I click on the top right on the columns button to add a new column then I can see my tooltip. This means tooltipId was successfully changed but will only get recognized when the Table component recieves any element update/change.

I'm new to react but I guess it has to do with the useMemo() or useCallback() React parts in your table example. However, I gwas guessing that passing [tooltipId] to the renderCell() would solve the problem because as far as I understand React Hooks this way it will detect variable changes and reload the context of the hook.

But in this case it is not working. I tried almost everything including try to Force Reload it with forceRender()

const [, forceRender] = useReducer(x => !x, true)

Which is also not working.

Am I missing something? Also in your Tooltips docs page I did not find any suitable example for programatically defining tooltips. Maybe I doing something wrong? Is there an official way?

If I use this then it is working:

https://nextui.org/docs/components/popover

Also another question, when I use the table with selectionMode:multiple then my custom copy clipboard button is working but the z-index of the selected row will always win. I tried to set my button z-index higher but it does not work. Is it even possible to win the z-index race with a custom button inside of your row?