[Chip] When used as Popover trigger, focus not returned upon closing

[kylegach]

• 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 😯

If you use a Chip as the trigger for a Popover (e.g. in place of Button in the Simple Popover demo), then focus is not correctly placed on the Chip when you close the Popover. Or, more accurately, it would seem that focus is first placed on the Chip and then it is immediately lost (placed on body).

Expected Behavior 🤔

Focus should be correctly placed on the triggering Chip upon closing a Popover. In other words, Chip should behave the same as Button, in this regard.

Steps to Reproduce 🕹

Sandbox: https://codesandbox.io/s/material-demo-forked-8q981?file=/demo.tsx

Notes on Sandbox:

Created by forking sandbox for https://material-ui.com/components/popover/#simple-popover.

Only changes:

1. Change Button to Chip
   • Change HTMLButtonElement to HTMLDivElement
2. Add onFocus and onBlur props to the trigger (Chip) and Popover, to log each event

Steps:

1. Open sandbox
2. Open console of sandbox env
3. Focus Chip
   • Note console logs Chip focus
4. Press Enter to open Popover
   • Note console logs Chip blur, then Popover focus
5. Press Esc to close Popover
   • Note that the console logs in this order:
     1. Popover blur
     2. Chip focus
     3. Chip blur ⬅️ this is the issue; it shouldn't happen

Context 🔦

Given that both Chip (when "clickable") and Button both render a ButtonBase, which seems to handle all focus-related concerns, I'm not sure why the behavior is different.

If there is a userland workaround (perhaps using ButtonBase's action?), that would be acceptable.

Or, if you can point me toward what needs fixed, I'm happy to submit a PR.

Your Environment 🌎

Confirmed issue in latest Chrome, Chrome Canary, Firefox, and Safari on MacOS.

`npx @material-ui/envinfo`

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 86.40 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.19.2 - ~/.yarn/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Managers:
    Homebrew: 2.7.5 - /usr/local/bin/brew
    pip3: 20.3.3 - /usr/local/bin/pip3
    RubyGems: 2.5.2.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 10.14. - /usr/bin/gcc
    Git: 2.30.0 - /usr/local/bin/git
    Clang: 1001.0.46.4 - /usr/bin/clang
    Subversion: 1.10.3 - /usr/bin/svn
  Servers:
    Apache: 2.4.34 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.2 - /usr/local/bin/docker
    VirtualBox: 6.0.14 - /usr/local/bin/vboxmanage
  IDEs:
    Emacs: 22.1.1 - /usr/bin/emacs
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.53.2 - /usr/local/bin/code
    Vim: 8.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.1.33 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.1 - /usr/local/bin/python3
    Ruby: 2.3.7 - /usr/bin/ruby
  Databases:
    SQLite: 3.24.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 88.0.4324.192
    Chrome Canary: 91.0.4435.0
    Firefox: 85.0.2
    Firefox Developer Edition: 74.0
    Safari: 14.0.3
  Monorepos:
    Yarn Workspaces: 1.19.2
    Lerna: 3.22.1

[oliviertassinari]

I have simplified the reproduction and upgraded it to the latest version (v5.0.0-alpha.26): https://codesandbox.io/s/material-demo-forked-zcssl?file=/demo.tsx. I can reproduce

[eps1lon]

Reduce to just using Modal+Chip. Probably an issue with the TrapFocus since focus is shortly returned to the Chip on exit:

modal-chip-focus-loss.mp4

-- https://codesandbox.io/s/chip-trapfocus-wzhfl?file=/demo.tsx

[ZeeshanTamboli]

This was fixed in Material UI version 6 in #41578 as a breaking change. Checkout the migration guide: https://mui.com/material-ui/migration/upgrade-to-v6/#chip.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@kylegach How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.