This is not the first time I've encountered an issue almost exactly like this, wherein I have a react-bootstrap <Button> inside of a react-bootstrap <Col> inside of a `' and that button will simply not be clickable.
Earlier, I was able to circumvent this by removing the from the it was in, into something less nested, but this time that does not seem to be a viable option. My code looks as follows...
<div style={{borderColor: "grey", borderWidth: .5, border: 'solid'}}>
<Row>
<Col sm={10}>
<input type='text' onChange={(event) => handleTextChange(event.target.value)} value={typedMessage} style={{width: '100%', height: '100%'}}/>
</Col>
<Col sm={2}>
<Button style={{width: '100%', marginLeft: 0}} onClick={() => handleSendMessage()}>
Send
</Button>
</Col>
</Row>
</div>
Where right now, handleSendMessage() just has a console.log("Hit send") inside of it. When I hover over the button, it has the finger pointer, yet when I click there is no shading / opacity animation like there usually is, and no console.log statement. Does anyone have any ideas how to correct this?