Comments (8)
We could consider a contribution for this. It'd have to be opt-in behavior though.
Thanks for the extra information.
from react-spectrum.
This feels like a valid use case to me, we do already have access to the segment's min and max in the increment and decrement methods, so theoretically we could implement the behavior you described so long as we batch together the increment/decrement of the adjacent segment along with changing the current segment to its min/max. Will ask the team if they have any opinions on this here.
from react-spectrum.
Hmm I’m not sure if this offers a better user experience. For example, if you’re focused on the minutes, would you expect changes to occur outside of the minutes? I think it could be confusing in the case you’re using VO changing the minutes when the hour suddenly changes.
That said, I do vaguely recall the old iOS timer behaving similar to this (I could be wrong but it feels familiar) so the behavior isn't entirely unheard of
from react-spectrum.
Thanks for considering!! Regardless of seeing this feature land or not, I could (and maybe other users in the future) use some pointers on how to implement this with the current components. Is there no other way than forking useDateSegment.ts
and dependent components?
from react-spectrum.
You may be able to chain together your own keydown/pointer handlers with what useDataSegment provides to provide the additional segment updates? I imagine there will be other issues that will occur that will result in needing to fork useDateSegment at the very least just so that you have finer control over the specific logic that happens in increment/decrement.
from react-spectrum.
For example, if you’re focused on the minutes, would you expect changes to occur outside of the minutes? I think it could be confusing in the case you’re using VO changing the minutes when the hour suddenly changes.
@yihuiliao do you think the same argument could be made of the current behavior, that switches focus from a segment to the next one when typing values using a physical keyboard?
from react-spectrum.
@vgrafe Mind expanding on your exact use case? I assumed at first that this was manipulating duration (aka like in video editing as you are scrubbing through perhaps) but that would need to be a different thing entirely (would use the Intl.DurationFormat instead). The team still saw a use case for manipulating dates still though (browsing through logs or something), but Spectrum Design doesn't have a UX pattern that would use this yet so it is unlikely that we would pick this up in the short term unfortunately.
from react-spectrum.
Got you, thanks for the extra context! I'll try to clarify my use case if that helps: I am implementing a webapp that provides a DateField and a canvas for timeseries dataviz. There is no scrubber or slider since any datetime can be set on the DateField, and on any change on that field, data is fetched and rendered in the canvas.
At first that was great, but it became natural to focus minutes or seconds then use the up/down arrows, providing a way to see data evolve in time, and this UX really works - except that, as you imagine, it is not possible to increment/decrement more than 59 times when focusing on seconds or minutes, without seeing the data jumping back in time.
I hope this makes the case for this behavior as a valid expectation, but am not insisting that this should prioritized; I can prob whip an quick and unfathomable hack to fix my use case. I appreciate your work and opinion on this!
from react-spectrum.
Related Issues (20)
- Native validation doesn't dismiss errors as the user corrects them HOT 11
- Expose `isRTL` utility function
- useDateSegment crashes on null reference during unmount HOT 1
- Adjusting screen reader (VoiceOver MacOS) reading order for a react-aria-components HOT 1
- Context Slots are not Extensible HOT 1
- NumberField step attribute doesn't work for values with more than 3 fraction digits HOT 2
- `createLeafComponent` Outputs Incorrect RefAttributes Type HOT 2
- Sticky `data-hovered` on `Row` if `Popover` can be opened from inside it HOT 5
- [Calendar/RangeCalendar] Allow controlling visibleRange
- Display DatePicker calendar popover when the date segments gain focus
- Select / ComboBox Open State isn't Persisted into Button's isPressed Render Prop HOT 2
- GridList renderEmptyState cannot be a Component with Hooks HOT 2
- (0 , $lislG$swchelperscjs_class_private_field_initcjs._) is not a function HOT 1
- [RAC] NumberField really strange behavior HOT 3
- Tooltip causing ResizeObserver issue HOT 4
- Select with additional buttons traps focus
- Cannot setup dev environment HOT 6
- Multiple auto-dismiss toasts
- Exception when dragging items in RAC ListBox with sections HOT 1
- Rules of hooks error in `useLinkProps` HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spectrum.