[DatePicker] Add keyboard support to inline mode #5030
Conversation
[docs] Add v0.15.3 to the versions.json
| @@ -182,6 +209,9 @@ class DatePicker extends Component { | |||
| * (get the current system date while doing so) | |||
| * else set it to the currently selected date | |||
| */ | |||
| if (this.shouldHandleKeyboard()) | |||
There was a problem hiding this comment.
The comment above this is a little messed up, it actually belongs to line 215.
oliviertassinari
added
the
component: date picker
|
Any expectation timeframe on when this gets merged? Thanks! |
oliviertassinari
added
PR: needs revision
There was a problem hiding this comment.
Thanks for this PR. Sorry for the long review delay.
I couldn't try out the demo as this PR is based on an old commit. We might need to rebase it.
However, I'm not sure we gonna move forward with this PR, we want to focus on bug fixes for the master branch and the migration of components on the next branch.
| @@ -158,6 +173,12 @@ class DatePicker extends Component { | |||
| }); | |||
| } | |||
|
|
|||
| componentDidMount() { | |||
| const node = ReactDOM.findDOMNode(this.refs.root); | |||
There was a problem hiding this comment.
Why accessing the DOM element when we can use the synthetic React events system?
| onFocus={this.handleFocus} | ||
| onFocus={this.handleInputFocus} | ||
| onBlur={this.handleInputBlur} | ||
| onKeyDown={this.handleKeyDown} |
There was a problem hiding this comment.
That's a breaking change, users can no longer override the onKeyDown property.
That's definitely not the only breaking change.
| /> | ||
| <DatePickerDialog | ||
| DateTimeFormat={DateTimeFormat} | ||
| autoOk={autoOk} | ||
| useLayerForClickAway={!this.shouldHandleKeyboard()} | ||
| anchorEl={this.refs.root} |
There was a problem hiding this comment.
What's the use case behind this change?
| event.preventDefault(); | ||
| return; | ||
| } | ||
|
|
||
| if (this.props.onTouchTap) { |
There was a problem hiding this comment.
Shouldn't users still be able to use onTouchTap?
| // and also because it doesn't use the browser's timezone. | ||
| const parts = filtered.split('-'); | ||
| if (parts.length === 3) | ||
| dt = new Date(parts[0], parts[1] - 1, parts[2]); // Note: months are 0 based |
There was a problem hiding this comment.
It would be great to allow users using a different formatting pattern.
|
Just a users word of input: The date picker is almost completely useless
without this fix because it takes 10x longer to enter a date without the
keyboard. I hope you do prioritize getting this merged before end of year.
Thanks!
|
I get that, let's try to move that PR forward 👍 . |
|
@caesay @oliviertassinari Hope this get merged too. Thanks a lot ! |
oliviertassinari
added
the
PR: out-of-date
|
I'm closing this PR as quite old now. The corresponding issue is right here mui/mui-x#6232. |
|
Any news when will this be merged? :) we are eager to use it. Thanks a lot! |
When
container=inlineandkeyboardEnabled=trueon aDatePickercomponent, this enables keyboard support. You can tab in, type a date, tab out. Also, clicking directly on the control also focuses the textbox.This was originally opened at PR #4945, but i messed up the branch and had to close the PR and force-push the branch so I can't re-open the old one.
Closes mui/mui-x#6232
Related #5727