Why is my cursor pointer disabled on <button> after refresh?

Question

I'm trying to build an Uniswap Clone with React & Tailwind CSS, and I have created a "Connect Wallet" button that triggers a Metamask popup to connect wallet.

Everything else seems to be working fine, but when I fully refresh the web application page, my cursor pointer becomes disabled when I hover over the "Connect Wallet" button.** Basically, my cursor stays at the default arrow pointer mode, doesn't change to cursor pointer, and I am unable to click the button.

Image of app in Chrome Browser

Interestingly enough, when I refresh the page and quickly place my mouse over the Connect Wallet button, I am briefly able to click the button and open the Metamask Pop-up as usual. But, when the page is fully refreshed, the cursor goes back to the normal/default arrow pointer, and I am unable to click the button.

Anybody have an idea of what might be causing this, and how I may be able to resolve it?

PS: I have tried to add "cursor-pointer" class to my button. I thought it would force the cursor to change to pointer on hover, but this didn't fix the problem.

Here's my React code block for the button:

const WalletButton = () => {
  const [rendered, setRendered] = useState('');

  const {ens} = useLookupAddress();
  const {account, activateBrowserWallet, deactivate} = useEthers();
  
  return (
    <button
      onClick={() => {
        if (!account) {
          activateBrowserWallet();
        } else {
          deactivate();
        }
      }}
      className={styles.walletButton}
    >
      {rendered === "" && "Connect Wallet"}
      {rendered !== "" && rendered}
    </button>
  );
};

export default WalletButton

Here are the tailwind CSS styles that are currently applied to the button:

// WalletButton
  walletButton:
    "bg-site-pink border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-pink-600 transition-all",

i think there's a problem with useEthers that keeps you from pressing the button. if your node is back to default node then tailwind can't compile the style you may need to add it to something like windicss safelist — Tachibana Shin
– Tachibana Shin, Commented Feb 10, 2023 at 9:55
Can you console.log account and test to see what values you get? — Kostas Minaidis
– Kostas Minaidis, Commented Feb 10, 2023 at 17:02
Yes, thank you I can see if I can provide codesandbox, and try the console.log as well. Bear with me — W3Charles
– W3Charles, Commented Feb 11, 2023 at 8:18
Hi Kostas, so I console.logged (account) and it says "{account: undefined}" — W3Charles
– W3Charles, Commented Feb 11, 2023 at 9:21

W3Charles · Accepted Answer · 2023-02-21 06:08:47Z

0

I found a solution to this. In fact, this issue is very similar to this:

https://stackoverflow.com/a/70807924/20237510

I ended up using Fix #2 in the solution provided in the thread above:

iframe {
  pointer-events: none;
}

Hope that helps someone else!

answered Feb 21, 2023 at 6:08

W3Charles

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is my cursor pointer disabled on <button> after refresh?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related