Disabled Button focus within Portal

[Mangatt]

When is disabled Button placed within Portal, parent outside Portal does not receive focus properly.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When you click on normally placed Button, parent receives focus correctly even when that Button is disabled. When you place that Button in portal, only enabled Button do that.

Expected Behavior 🤔

Events should work exactly the same in both cases, no matter if Portal is used.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-issue-forked-eu17z?file=/src/Demo.js

Steps:

1. Click on normally placed enabled/disabled Button. Parent receives focus (marked by red outline)
2. Click on enabled Button in Portal. Parent receives focus as well.
3. Click disabled Button in Portal. Parent does not receive or lose focus depending on previous state.

Context 🔦

Focused state of parent affects display of some controls within its tree. When user clicks disabled Button, these controls are hidden even though they should be displayed.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	17.0.1
Browser	Chrome 86

[oliviertassinari]

Why is this not an issue with React?

[Mangatt]

@oliviertassinari Because it is Material UI problem, see updated demo with regular buttons:
https://codesandbox.io/s/material-ui-issue-forked-eu17z?file=/src/Demo.js

When parent has focus and you click on normal disabled button, nothing happens. When MUI Button is clicked, focus is lost.

[eps1lon]

This happens because we disable pointer-events when the button is disabled. I'm currently working on removing that behavior but it requires some more work. You can follow #23101

Wrong analysis. Will keep you posted.

[oliviertassinari]

I think that we can close, it's an edge case (i.e. negative ROI). It has to do with the nested span.

[Mangatt]

Is there a workaround then? Because that way we can't use any MUI Button-based component at all.

[eps1lon]

That's definitely odd behavior but since click-focus is not specified and up to the user-agent not very surprising. The inner span is on the chopping block for v5 anyway but we'll need to investigate it first. Alternatively we can work around it with pointerdown events.

[eps1lon]

Is there a workaround then?

const Button = React.forwardRef(function Button(props, ref) {
  const { onPointerDown = () => {}, disabled, ...other } = props;

  function handlePointerDown(event) {
    if (disabled) {
      event.preventDefault();
    }
    onPointerDown(event);
  }

  return (
    <MuiButton
      ref={ref}
      disabled={disabled}
      onPointerDown={handlePointerDown}
      {...other}
    />
  );
});

-- https://codesandbox.io/s/material-ui-issue-forked-ybvw2?file=/src/Demo.js:141-535

[Mangatt]

@eps1lon Thanks, but this is solution just for Button alone, not for every other Button based components. I'll have something more generic in mind, hopefully it will work.

[Mangatt]

Ok, just for reference, when any parent element of Button inside portal is able to receive focus, everything works fine:

https://codesandbox.io/s/material-ui-issue-forked-mzj74?file=/src/Demo.js

For time being we will use this workaround, it is probably most universal, even though still not entirely optimal.