Function inside Material UI Tabs not firing

Question

I could not reproduce the problem but I tried to. I have a Material UI element with a child I've added inside it. The icon/child is the X in the corner. The tab/parent is the surrounding box.

tabs

Two problems:

I want to click on the child but the parent covers it entirely and the child is not getting clicked.
Even if it is clicked, it's inside the Tab icon field and this seems to disrupt the click anyway.

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>})}

I tried to solve this by using the onMouseMove event on the Tab above by using it like so.

Positioning the child in the top corner of the parent as shown.
When the cursor gets near the child in the corner, manually target the child with this. (The x & y vals are arbitrary and specific to this case)

function mouseEvent(e) {
 var rect = e.target.getBoundingClientRect();
 var x = e.clientX - rect.left; //x position within the element.
 var y = e.clientY - rect.top;  //y position within the element.
 let trigger = document.querySelector('.icon-wrapper')
 let parent = document.querySelector('.MuiButtonBase-root-59')
 if(y <= 27 && x >= 60){
     trigger.focus()
 } else {
     trigger.blur()
 }
}

If I move the Icon out of the tab onto the page it begins to work, ~~so I don't know if it is the parent that is blocking it, or if it's the Tab icon field causing the problem.~~

The focus appears visually when I get in the range of the above coords but the click never fires. It seems like the mouse only has access to the parent yet when mousing over the icon with the above mouseover event I'm logging console.log(document.activeElement.className) and close-icon appears, which is correct. So then it seems like it's the function that is not firing.

I need to be able to click the tab as it has its own click handler (not shown), so it cannot be disabled. ~~I haven't found a way to add to the Tab outside of these fields, however if it's possible it is possible it could be the answer.~~

Really I want to do is close the tab on click which seems like something pretty basic.

guest · Accepted Answer · 2019-03-26 08:01:41Z

0

you have to use a handler of onChange function, and read e.target. If e.target from CloseIcon - e.preventDefault(); What I mean:

handleTabChange(e, tab) {

    if (e.target.tagName !== 'DIV') { // Our label wrapped by div tag, so, if it isn't true - click made to specific buttons or icons and etc...
      e.preventDefault();
    }

    const { onTabChange } = this.props;
    onTabChange(tab);
  }

answered Mar 26, 2019 at 8:01

guest

1

Sign up to request clarification or add additional context in comments.

Comments

Mote Zart · Accepted Answer · 2019-02-04 00:09:36Z

-1

I was not able to overcome the material UI problem but I solved it by using a click on the tab/parent itself, and just simulated the icon by setting a state variable to true when the mouse enter the icon area, and false otherwise. Hovering on/off the icon toggles the variable.

if(y <= 27 && x >= 60){
        // let trigger = document.querySelector('.material-icons.MuiIcon-root-65')
        this.setState({hovered: true})
    } else {
        this.setState({hovered: false})
    }
}

If it's true then, the click will fire.

handleIconClick(){
      if(!this.state.hovered){
          return
      }
      console.log('click')
  }

So the icon is never clicked, only the corner of the parent.

answered Feb 4, 2019 at 0:09

Mote Zart

9703 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Function inside Material UI Tabs not firing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related