Material-ui: [TrapFocus] disableAutoFocus is not working

[AlbertoFardin]

From v4.3.0 the prop "disableAutoFocus" of doesn't work.

To reproduce I create this demo:

import Input from '@material-ui/core/Input';
import Popover from '@material-ui/core/Popover';
import * as React from 'react';

export default () => {
  const [value, setValue] = React.useState('');
  return (
    <div>
      <Input
        onChange={(e) => setValue(e.target.value)}
      />
      <Popover
        open={!!value}
        onClose={() => setValue('')}
        anchorReference="anchorPosition"
        anchorPosition={{top: 200, left: 400}}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        disableAutoFocus={true}
        children={value}
      />
    </div>
  );
};

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

Tip: disableEnforceFocus.

[jedwards1211]

@oliviertassinari isn't it a bug that disableAutoFocus is useless without disableEnforceFocus?

Looking at the code, even if disableAutoFocus prevents the initial focusing, the contain interval will end up stealing focus anyway unless disableEnforceFocus is true.

... or is the idea that some people might want to disableEnforceFocus but still have the initial autofocus?

[oliviertassinari]

@jedwards1211 Interesting, yeah, we kind of made disableAutoFocus useless in #16585. What about?

diff --git a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js
index d8d6fe2ee..bd5977237 100644
--- a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js
+++ b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js
@@ -111,14 +111,17 @@ function Unstable_TrapFocus(props) {
     doc.addEventListener('focus', contain, true);
     doc.addEventListener('keydown', loopFocus, true);

+    let interval;
     // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area
     // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
     //
     // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
     // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
-    const interval = setInterval(() => {
-      contain();
-    }, 50);
+    if (!disableAutoFocus) {
+      interval = setInterval(() => {
+        contain();
+      }, 50);
+    }

     return () => {
       clearInterval(interval);