Skip to content
This repository was archived by the owner on Jan 20, 2026. It is now read-only.

Improve Keyboard UX#311

Open
froston wants to merge 2 commits intoreact-component:masterfrom
froston:master
Open

Improve Keyboard UX#311
froston wants to merge 2 commits intoreact-component:masterfrom
froston:master

Conversation

@froston
Copy link
Copy Markdown

@froston froston commented Oct 23, 2017 •
edited by benjycui
Loading

Datepicker

  • Should accept focus (tabindex)
  • Needs outline when focused
  • Should immediately allow for typing when opened
  • Should close on blur
  • Should close on Esc

Edit: close #310

@coveralls
Copy link
Copy Markdown

coveralls commented Oct 23, 2017

Coverage Status

Coverage increased (+0.1%) to 80.396% when pulling b163b77 on froston:master into 02b9e13 on react-component:master.

@coveralls
Copy link
Copy Markdown

coveralls commented Oct 23, 2017

Coverage Status

Coverage increased (+0.1%) to 80.396% when pulling 8b85cd6 on froston:master into 02b9e13 on react-component:master.

benjycui
benjycui reviewed Oct 25, 2017
View reviewed changes
Comment thread src/Calendar.jsx

const dateInputElement = props.showDateInput ? (
<DateInput
dateInputRef={props.dateInputRef}
Copy link
Copy Markdown
Member

@benjycui benjycui Oct 25, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the use case for this new API?

benjycui
benjycui reviewed Oct 25, 2017
View reviewed changes
Comment thread src/Picker.jsx
if (!this.props.calendar.props.showDateInput) {
this.focusTimeout = setTimeout(this.focusCalendar, 0, this);
} else {
this.focusTimeout = setTimeout(this.focusDateInput, 0, this);
Copy link
Copy Markdown
Member

@benjycui benjycui Oct 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we focus directly in date input, then users cannot change date with up down and so on.

@benjycui
Copy link
Copy Markdown
Member

benjycui commented Oct 25, 2017

I am consulting our UX designer for the suggested keyboard experience for rc-calendar.

Maybe you can try rc-collapse first? For we had found an online demo to show the best practice ant-design/ant-design#6017 , and it is simple enough to start.

@froston
Copy link
Copy Markdown
Author

froston commented Oct 25, 2017

Ok thanks!
I was just following this antd issue. It was accepted with PR welcome.
The only thing which is missing is Should open when focused. I could make it working in all the browsers but IE.
I think it somehow makes sense: if you have input, focus it; if you don't, focus the calendar. And if user wants to navigate thru the calendar anyway, can focus it by mouse and then continue with keyboard.

@benjycui
Copy link
Copy Markdown
Member

benjycui commented Oct 26, 2017

Actually, the keyboard UX of rc-calendar is extremely complex. Hope that you can try other components first, and I think rc-collapse is a better choice.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@benjycui benjycui benjycui left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve Keyboard UX

4 participants

@froston @coveralls @benjycui @pavelmullerjbk