search

Pomax / react-onclickoutside

An onClickOutside wrapper for React components
MIT License
1.83k stars 187 forks source link

handleClickOutside not called when clicking on a disabled button #352

Open karl opened 3 years ago

karl commented 3 years ago

I think I've come across a bug in this library where clicking on a disabled button does not trigger handleClickOutside.

See this CodeSandbox for a minimal recreation of the bug:

https://codesandbox.io/s/react-onclickoutside-does-not-work-with-disabled-buttons-mio5q

Let me know if you need any more info!

Pomax commented 3 years ago

The only element I can reproduce this for is the disabled text input, and then only in Firefox - Chrome seems to work correctly on every disabled element for me in Windows. Which OS/browser combination(s) did you find this in?

karl commented 3 years ago

Oh interesting! Thanks for taking the time to try and recreate this.

I discovered this on Chrome on macOS.

On Thu, 22 Apr 2021 at 5:52 pm, Pomax @.***> wrote:

The only element I can reproduce this for is the disabled text input, and then only in Firefox - Chrome seems to work correctly on every disabled element for me in Windows. Which OS/browser combination(s) did you find this in?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Pomax/react-onclickoutside/issues/352#issuecomment-825012930, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAA4YKDYF2SEUHNVVE44ADTKBH3JANCNFSM43MEJWMA .

karl commented 3 years ago

Urgh, I just spotted that the Code Sandbox link I sent before wasn't correctly set up (it still contained a work around I was trying for the bug). I've removed the workaround and it should now be demonstrating the problem with clicking on disabled buttons.

Pomax commented 3 years ago

Yep, that's doing what you described. Reduced test case:

import React, { Component } from "react";
import { render } from "react-dom";
import onClickOutside from "react-onclickoutside";

class Clicker extends Component {
  state = { numClicks: 0 }

  render = () => 
    <div style={{background:`lightgrey`}}>
      Num clicks {this.state.numClicks}
    </div>

  handleClickOutside() {
    this.setState({
      numClicks: this.state.numClicks + 1
    });
  };
}

const WrappedClicker = onClickOutside(Clicker);

render([
  <WrappedClicker />,
  <input disabled value="test"/>
], document.getElementsByTagName(`div`)[0]);

with HTML:

<!DOCTYPE html>
<html>
  <head><title>React App</title></head>
  <body><div></div></body>
</html>