Material-ui: Popover blurs focusing TextField.

[zheeeng]

I two main Components in this situation:

1. TextField for inputting
2. Popover manual for showing inputting tips.
3. When users are texting something, they may need to look up some tips, they could hover to a tip zone to trigger the popover manual.
4. Unfortunately, the popover blurs the TextFiled, users have to relocate TextFiled cursor location.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The Popover has no effects on other components.

Current Behavior 😯

The Popover blurs TextField.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/1omr9x0np7

1. Text something in TextField
2. Hover on Popover trigger
3. TextField lose focus

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.0-alpha.7 |
| React | v16.8 |
| Browser | Version 73.0.3683.86 (Official Build) (64-bit) |
| TypeScript | 3.4.3 |
| etc. | |

[eps1lon]

Things to know when using the Popover component:
The component is built on top of the Modal component.
The scroll and click away are blocked unlike with the Popper component.

-- https://material-ui.com/utils/popover/

Your codesandbox doesn't have a textfield so it's hard to replicate. I think you should rather use a Tooltip or Popper for your use case.

[zheeeng]

@eps1lon Sorry, I updated Reproduction link.

[eps1lon]

@eps1lon Sorry, I updated Reproduction link.

Yeah as I said: a Popper or Tooltip is more appropriate. A Popover is intended to block the background.

[zheeeng]

Thanks, Popper is the correct choice