Native iOS shake to undo not working properly with React Aria fields like TextField

pawelblaszczyk5 commented 4 months ago

Provide a general summary of the issue here

iOS has this feature, when writing something you can shake your phone and a dialog with an option to undo will show up. This doesn't work properly in React Aria with all of the fields.

In case of TextField, NumberField, Combobox and Textarea, after clicking undo text stay the same but input is focused (this part is correct). Example videos:

https://github.com/adobe/react-spectrum/assets/54995479/55e3efdd-1e04-4f52-b69a-f2e7a641ce4a

https://github.com/adobe/react-spectrum/assets/54995479/59787c7d-2030-4dd2-bc48-74ba53154882

https://github.com/adobe/react-spectrum/assets/54995479/2cc5136b-7041-4dc3-ac0b-eb1426299188

In case of DateField and TimeField after editing a segment and shaking no dialog is shown, I'm not sure why that happens but I'm aware that they're implemented in special way because of the segments.

🤔 Expected Behavior?

Triggering undo this way properly undo (there's also an option to redo after undoing) edit. I'm not sure is it possible to implement that in DateField/TimeField but that'd also be nice

😯 Current Behavior

Text stay the same or no undo dialog being shown, depending on components

💁 Possible Solution

Tbh I have no idea. Only thing that I managed to find - I've also tested it with other libraries and couldn't reproduce it in them.

🔦 Context

Maybe that's not a popular iOS feature - I found it by a friend mentioning that this stuff isn't working on some of my side projects that utilizes React Aria under the hood

🖥️ Steps to Reproduce

Open some documentation example with field e.g. TextField on an iOS device.
Try to enter some value
Shake your phone to trigger the undo dialog
Select to undo edit
Observe text not being changed

Version

React Aria Components 1.2.1 but it doesn't seem to be version specific

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

I've tested on a few of them, but all are Safari under the hood anyway

What operating system are you using?

iOS 17.5.1, also verified on 16.x

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 4 months ago

Native iOS shake to undo behavior is extremely odd.

https://jsfiddle.net/35hzo2wu/1/ I can undo in 1 or 3, but not in the second textfield.

https://jsfiddle.net/35hzo2wu/2/ Here's with change events instead of keydown, where all of them work

The keydown is probably why it doesn't work on some of our more complicated examples.

All of that said, I'm not seeing any issues on TextField with my phone. iOS 17.5.1 https://github.com/adobe/react-spectrum/assets/698229/d6b46689-4555-4a9a-9cb8-7f808060acaa

pawelblaszczyk5 commented 4 months ago

Native iOS shake to undo behavior is extremely odd.

https://jsfiddle.net/35hzo2wu/1/ I can undo in 1 or 3, but not in the second textfield.

https://jsfiddle.net/35hzo2wu/2/ Here's with change events instead of keydown, where all of them work

The keydown is probably why it doesn't work on some of our more complicated examples.

All of that said, I'm not seeing any issues on TextField with my phone. iOS 17.5.1 https://github.com/adobe/react-spectrum/assets/698229/d6b46689-4555-4a9a-9cb8-7f808060acaa

Okay, I see the difference why it's working on your phone recording. If you don't close the keyboard/unfocus input and trigger undo shake it seems to work. In my example recordings I was clicking away from input before shaking

adobe / react-spectrum