The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box.
There are two main problems:
- Despite my intentions to click on the child element, the parent completely covers it, making it impossible to click on the child.
- Even when clicked, the presence of the
Tabicon field seems to disrupt the intended action as well.
handleIconClick(){
console.log('click')
}
renderIcon() {
return (
<div
tabIndex="-1"
className="icon-wrapper"
onClick={this.handleIconClick.bind(this)}
>
<Icon />
</div>
);
}
...
<Tab icon={this.renderIcon} onMouseMove={this.mouseEvent.bind(this)} label={tab.label} key={i}></Tab>})}
To tackle this issue, I experimented with using the onMouseMove event on the aforementioned Tab.
- Positioning the child element in the top corner of the parent as demonstrated.
- Manually targeting the child element when the cursor nears the corner. (The x and y values provided are specific to this scenario)
function mouseEvent(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
let trigger = document.querySelector('.icon-wrapper')
let parent = document.querySelector('.MuiButtonBase-root-59')
if(y <= 27 && x >= 60){
trigger.focus()
} else {
trigger.blur()
}
}
When I move the Icon outside of the tab onto the page, it starts functioning properly. This led me to question whether the blockage is due to the parent element or caused by the Tab icon field itself.
While the focus indicator displays when approaching the specified coordinates, the click action fails to execute. It appears that the mouse only registers interaction with the parent element. Upon logging
console.log(document.activeElement.className)close-icon confirms proper target selection. However, the desired function does not trigger.
It is essential for me to retain the ability to click on the tab, given its individual click handler (not disclosed). Therefore, disabling it is not a viable solution.
I have yet to discover a way to modify the Tab beyond the defined fields. Nevertheless, exploring other possibilities might yield a resolution.
In essence, what I aim to achieve is simply closing the tab upon click, marking a fundamental functionality.