fix: default disableAutoFocus to true for bindHover/bindFocus

README.md

@@ -274,8 +274,7 @@ the trigger component may declare the same id in an ARIA prop.
 
 If `true`, will not steal focus when the popup is opened. (And `bindPopover`/`bindMenu`) will inject `disableAutoFocus`, `disableEnforceFocus`, and `disableRestoreFocus`).
 
-You should use this option if you are doing `bindHover`. Otherwise the document may scroll back to the previous focused
-element when you move the pointer out of the hovered menu or popover.
+Defaults to `true` when the popup is opened by the `bindHover` or `bindFocus` element.
 
 ## `usePopupState` return value
 
@@ -394,7 +393,7 @@ const styles = (theme) => ({
 })
 
 const HoverPopoverPopupState = ({ classes }) => (
-  <PopupState variant="popover" popupId="demoPopover" disableAutoFocus>
+  <PopupState variant="popover" popupId="demoPopover">
     {(popupState) => (
       <div>
         <Typography {...bindHover(popupState)}>
@@ -547,7 +546,7 @@ the trigger component may declare the same id in an ARIA prop.
 
 If `true`, will not steal focus when the popup is opened. (And `bindPopover`/`bindMenu`) will inject `disableAutoFocus`, `disableEnforceFocus`, and `disableRestoreFocus`).
 
-You should use this option if you are doing `bindHover`. Otherwise the document may scroll back to the previous focused
+Defaults to `true` when the popup is opened by the `bindHover` or `bindFocus` element.
 
 ### `children` (`(popupState: InjectedProps) => ?React.Node`, **required**)
 

demo/examples/CascadingHoverMenus.hooks.js

@@ -7,6 +7,7 @@ import Button from '@material-ui/core/Button'
 import {
   usePopupState,
   bindHover,
+  bindFocus,
   bindMenu,
 } from 'material-ui-popup-state/hooks'
 
@@ -48,11 +49,10 @@ function CascadingSubmenu({ title, popupId, ...props }) {
     popupId,
     variant: 'popover',
     parentPopupState,
-    disableAutoFocus: true,
   })
   return (
     <React.Fragment>
-      <MenuItem {...bindHover(popupState)}>
+      <MenuItem {...bindHover(popupState)} {...bindFocus(popupState)}>
         <span className={classes.title}>{title}</span>
         <ChevronRight className={classes.moreArrow} />
       </MenuItem>
@@ -88,11 +88,14 @@ const CascadingHoverMenus = () => {
   const popupState = usePopupState({
     popupId: 'demoMenu',
     variant: 'popover',
-    disableAutoFocus: true,
   })
   return (
     <div style={{ height: 600 }}>
-      <Button variant="contained" {...bindHover(popupState)}>
+      <Button
+        variant="contained"
+        {...bindHover(popupState)}
+        {...bindFocus(popupState)}
+      >
         Hover to open Menu
       </Button>
       <CascadingMenu

demo/examples/FocusPopover.hooks.js

@@ -12,7 +12,6 @@ const FocusPopoverPopupState = ({ classes }) => {
   const popupState = usePopupState({
     variant: 'popover',
     popupId: 'demoPopover',
-    disableAutoFocus: true,
   })
   return (
     <div>

demo/examples/FocusPopover.js

@@ -5,7 +5,7 @@ import Input from '@material-ui/core/Input'
 import PopupState, { bindFocus, bindPopover } from 'material-ui-popup-state'
 
 const FocusPopoverPopupState = ({ classes }) => (
-  <PopupState variant="popover" popupId="demoPopover" disableAutoFocus>
+  <PopupState variant="popover" popupId="demoPopover">
     {(popupState) => (
       <div>
         <Input {...bindFocus(popupState)} placeholder="Focus to open Popover" />

demo/examples/HoverMenu.hooks.js

@@ -12,7 +12,6 @@ const MenuPopupState = () => {
   const popupState = usePopupState({
     variant: 'popover',
     popupId: 'demoMenu',
-    disableAutoFocus: true,
   })
   return (
     <React.Fragment>

demo/examples/HoverMenu.js

@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'
 import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state'
 
 const MenuPopupState = () => (
-  <PopupState variant="popover" popupId="demoMenu" disableAutoFocus>
+  <PopupState variant="popover" popupId="demoMenu">
     {(popupState) => (
       <React.Fragment>
         <Button variant="contained" {...bindHover(popupState)}>

demo/examples/HoverPopover.hooks.js

@@ -12,7 +12,6 @@ const HoverPopoverPopupState = ({ classes }) => {
   const popupState = usePopupState({
     variant: 'popover',
     popupId: 'demoPopover',
-    disableAutoFocus: true,
   })
   return (
     <div>

demo/examples/HoverPopover.js

@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'
 import PopupState, { bindHover, bindPopover } from 'material-ui-popup-state'
 
 const HoverPopoverPopupState = ({ classes }) => (
-  <PopupState variant="popover" popupId="demoPopover" disableAutoFocus>
+  <PopupState variant="popover" popupId="demoPopover">
     {(popupState) => (
       <div>
         <Button variant="contained" {...bindHover(popupState)}>

src/core.js

@@ -38,6 +38,7 @@ export type CoreState = {
   setAnchorElUsed: boolean,
   anchorEl: ?HTMLElement,
   hovered: boolean,
+  focused: boolean,
   _childPopupState: ?PopupState,
   _deferNextOpen: boolean,
   _deferNextClose: boolean,
@@ -48,6 +49,7 @@ export const initCoreState: CoreState = {
   setAnchorElUsed: false,
   anchorEl: null,
   hovered: false,
+  focused: false,
   _childPopupState: null,
   _deferNextOpen: false,
   _deferNextClose: false,
@@ -73,6 +75,7 @@ export function createPopupState({
     setAnchorElUsed,
     anchorEl,
     hovered,
+    focused,
     _childPopupState,
     _deferNextOpen,
     _deferNextClose,
@@ -122,6 +125,7 @@ export function createPopupState({
       const newState: $Shape<CoreState> = {
         isOpen: true,
         hovered: eventType === 'mouseover',
+        focused: eventType === 'focus',
       }
 
       if (currentTarget) {
@@ -144,14 +148,18 @@ export function createPopupState({
 
   const close = (arg?: SyntheticEvent<any> | HTMLElement) => {
     const eventType = arg && (arg: any).type
-    if (eventType === 'touchstart') {
-      setState({ _deferNextClose: true })
-      return
+    switch (eventType) {
+      case 'touchstart':
+        setState({ _deferNextClose: true })
+        return
+      case 'blur':
+        if (isElementInPopup((arg: any)?.relatedTarget, popupState)) return
+        break
     }
     const doClose = () => {
       if (_childPopupState) _childPopupState.close()
       if (parentPopupState) parentPopupState._setChildPopupState(null)
-      setState({ isOpen: false, hovered: false })
+      setState({ isOpen: false, hovered: false, focused: false })
     }
     if (_deferNextClose) {
       setState({ _deferNextClose: false })
@@ -192,7 +200,7 @@ export function createPopupState({
     toggle,
     setOpen,
     onMouseLeave,
-    disableAutoFocus: Boolean(disableAutoFocus),
+    disableAutoFocus: disableAutoFocus ?? Boolean(hovered || focused),
     _childPopupState,
     _setChildPopupState,
   }