As I work on developing a configuration page using React, I encountered an interesting issue. The page contains a table with configurable elements and a "save" button that starts off disabled and transparent. However, once a data field is modified, the button becomes enabled and fully opaque.
The problem arises when the disabled button overlaps parent elements like the sticky table header and nav bar, especially noticeable during scrolling. The issue goes away once the buttons are enabled, as they no longer cover the parent elements.
I am currently utilizing the react-bootstrap Button component to render the button, but switching to a regular HTML button yields the same results. It seems that both disabling the button and adjusting the opacity independently trigger this behavior.
<td className="saveButton">
<Button
variant="primary"
id={this.props.id}
disabled={!this.state.modified} //Only enable saving after data has been modified
style={this.state.modified ? {opacity: 1} : {opacity: 0.3}}
onClick={this.updateListItem}
>Save</Button>
</td>
The expected behavior is for the buttons to scroll beneath the sticky table header and navbar along with the rest of the table row. However, the disabled buttons end up rendering over these parent elements instead:
(The enabled button functions correctly by scrolling beneath the table header)
Any thoughts on what might be causing this issue?