adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.38k stars 1.08k forks source link

Copy and Paste support for DateField and TimeField #5285

Open wadeamaral opened 10 months ago

wadeamaral commented 10 months ago

Provide a general summary of the feature here

Looking for an easy way for users to copy and paste values to/from DateField and TimeField

๐Ÿค” Expected Behavior?

Copy and paste much like inputs

๐Ÿ˜ฏ Current Behavior

Currently does not support selecting all DateSegment values for copy and paste.

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

There are cases when users must fill in multiple Date/Time fields in a single form. Copy and paste seems like an intuitive way to provide a starting value before making additional changes.

๐Ÿ’ป Examples

Two quick examples that allow for copy and paste in a DateField:

MUI: https://mui.com/x/react-date-pickers/date-time-picker/ Kendo: https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

reidbarber commented 9 months ago

I think this is something we could at least partially implement with useClipboard.

In terms of pasting, we could accept date values or strings. If a string is pasted, we would need to check if it contains separators in order to determine if it is intended to replace the entire field, or just the active segment.

In terms of copying individual segments, it seems pretty straight-forward, but I'm not sure we can easily support copying the entire field since there isn't a way to select the contents of multiple inputs (segments).

devongovett commented 9 months ago

I think the question for copy and paste is "in what format"? This goes back to the whole reason we use individual segments instead of a single text field in the first place: because it's close to impossible to parse dates from a string correctly in an unknown/arbitrary format.

We could support copying and pasting only between React Aria date components using our own custom data format, but then you couldn't paste from an external location. We could choose a standard format like ISO 8601, but it's less likely for a human user to be copying a date in a computer format. But when it comes to dates a real user would actually want to copy and paste from outside a form into it that will be really difficult to do.

If we want to do something here we will need to decide on a way forward and probably try to scope it down to something doable.

ttsirkia commented 8 months ago

I would assume the user expects the value to be copied as shown in the field (containing the separators) and to be able to paste a value with the separators as shown in the field. No conversions, not any difficult parsing.

The field should behave as much as a normal textbox although it enforces the user to input the values in a a specific format.