handleClickOutside not called when clicking on a disabled button
karl opened this issue · comments
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!
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?
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.
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>