Draggable Dialog w/Autocomplete disconnects when dragged on touch interfaces

[thisisrandy]

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

Current Behavior 😯

Using the draggable dialog template described here and including in its contents the combo box described here, if we attempt to drag the dialog while the combo box is open on touch devices (iPad 6 & 7, iPhone 6, Safari & Chrome tested), the combo box popper disconnects from the dialog and remains in its original position. Additionally, the text cursor gets stuck in position until the next time the dialog is dragged or the input is selected. This:

is the result, noting the floating text cursor circled in red. Note that this second aberrant behavior exhibits with any TextField, not just one used inside an AutoComplete.

Expected Behavior 🤔

One of two things should happen:

1. The input should lose focus, causing the text cursor and popper to disappear. Incidentally, this is the behavior on desktop. I would expect that the core issue is still present on desktop, but it is rendered moot by automatically blurring when dragging.
2. The text cursor and popper should move together with the dialog when dragged.

Steps to Reproduce 🕹

https://codesandbox.io/s/weathered-frog-me457?file=/src/App.js

Steps:

1. On a touch device, focus the input, causing the popper to appear.
2. Drag and observe that the popper and text cursor do not move with the rest of the dialog.

Note that the floating popper behavior can be observed using the Chrome devtools device toolbar (try e.g. iPad). The floating text cursor behavior is only present on the actual devices.

Context 🔦

There are many scenarios where a draggable dialog including an autocomplete component would be useful. In my specific case, I am saving previously entered input in local storage and displaying it (freeSolo) sorted and grouped by recency. Draggability can improve suggestion visibility on some screens.

Your Environment 🌎

`npx @material-ui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @material-ui/envinfo` goes here. ```

My development environment is not actually relevant, because, as mentioned above, this issue only exhibits on touch devices (iPad 6 & 7, iPhone 6, Safari & Chrome tested), but including for completeness:

System: OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa) Binaries: Node: 14.17.0 - /usr/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.14.13 - /usr/bin/npm Browsers: Chrome: 90.0.4430.212 Firefox: 88.0.1

Additional comments

I originally posted this as a stack overflow question, and I was able to find a "solution" (emulate the desktop behavior of automatically blurring) as described here. See also this sandbox. At the very least, I would think a version of my patch should appear somewhere in your docs, but as it hides rather than addresses the issue, it's probably better to do something more substantial.

I'm pretty sure that the fact that the generated Popper is a child of body and not the draggable div is the problem, which is why I think this is a material-ui issue and not a react-draggable issue. However, I don't have any theories at the moment about why the text cursor only catches up when the dialog is grabbed again, so that may well be react-draggable's fault and not relevant to this bug. Please advise if you would like me to file that portion of the issue with them instead.

EDIT: It occurred to me that I could do a simple experiment to see if the floating cursor issue exhibits with just a vanilla input (no material-ui). This sandbox (when viewed on a touch device) indicates that it does not, so I think both parts of this belong here as material-ui issues.

EDIT 2: It turns out that the Chrome devtools device toolbar is sufficient to observe the floating popper (but not the floating text cursor). I have edited the "Steps to Reproduce" section to reflect this.

[eps1lon]

Thanks for the report.

It would be nice to isolate what is a browser and what a Material-UI issue. Dragging a div with textbox already leaves a trail of the textbox while dragging similar to https://i.imgur.com/e74caa9.jpg.

Especially try to isolate Autocomplete, Popper, and TextField and then their basic HTML counterpart.

[oliviertassinari]

It looks like a duplicate of #22303. The Popper is not notified when its anchor position changes.