Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Fix: Datepicker: Unable to enter date manually#3036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
chuyler wants to merge1 commit intosalesforce:master
base:master
Choose a base branch
Loading
fromchuyler:date-picker-manual-entry

Conversation

@chuyler
Copy link

@chuylerchuyler commentedApr 29, 2022
edited
Loading

Fixes#2956

Additional description

Previously, the DatePicker would try to format the value in the input box after every keystroke, preventing the user from actually typing out a date or changing an existing date by pressing the delete key in front of a character and replacing it with a new character. Additionally, passing in a new date value to the component did not update the value displayed in the input box.

This fix includes changes for:

  • Initialization of input state variables has been moved to getDerivedStateFromProps to allow updates from parent component
  • handleInputChange no longer calls parent onChange callback but instead waits until user presses ENTER or TAB
  • Pressing ESCAPE from within the input box resets the component to initial state

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

  • First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
  • npm run lint:fix has been run and linting passes.
  • Mocha, Jest (Storyshots), andcomponents/component-docs.json CI tests pass (npm test).
  • Tests have been added for new props to prevent regressions in the future. Seereadme.
  • Review the appropriate Storybook stories. Openhttp://localhost:9001/.
  • Review tests are passing in the browser. Openhttp://localhost:8001/.
  • Review markup conforms toSLDS by looking atDOM snapshot strings.

REVIEWER checklist (do not remove)

  • CircleCI tests pass. This includes linting, Mocha, Jest, Storyshots, andcomponents/component-docs.json tests.
  • Tests have been added for new props to prevent regressions in the future. Seereadme.
  • Review the appropriate Storybook stories. Openhttp://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Openhttp://localhost:9001/.
  • Review tests are passing in the browser. Openhttp://localhost:8001/.
  • Review markup conforms toSLDS by looking atDOM snapshot strings.
Required only if there are markup / UX changes
  • Add year-first date and commit SHA tolast-slds-markup-review inpackage.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA,last-accessibility-review, topackage.json and push.
  • While the contributor's branch is checked out, runnpm run local-update within locally clonedsite repo to confirm the site will function correctly at the next release.

@welcome
Copy link

welcomebot commentedApr 29, 2022

Thanks for opening this pull request! 💯

This is a community-driven project, and we can't do it without your participation. Please check out ourcontributing guidelines and review the Contributor Checklist if you haven't already, to make sure everything is squared away. CircleCI will take about 10 minutes to run through the same items that are on the Contributor checklist with a pass/fail check below. Please fix any issues that cause CircleCI to fail or ask for clarification--we try, but sometimes the errors can be unclear.
A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread. To ensure codebase quality, large code line changes may take more than 2 weeks to review, but may take longer depending on the number of pull requests in the queue. Feel free to ask for a status update at any time--you won't be bothering anyone.
Once feedback has been given, please reply to the feedback giver once the feedback on been addressed, so that they can continue the review.
If you need a release while you are waiting for a code review, you can publish a built tag to your own fork. See directions in therelease README.

@salesforce-cla
Copy link

Thanks for the contribution! Before we can merge this, we need@chuyler tosign the Salesforce.com Contributor License Agreement.

@interactivellama
Copy link
Contributor

Hi, I'm back from the dead!

This patterns appears to stop the Datepicker from being controlled by the state of the parent component and moves state into the Datepicker.

I could be missing something in the above statement, but components should be controlled components instead of uncontrolled per the project overview.https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#use-controlled-components

@chuyler
Copy link
Author

I'm not sure I follow your comment. Please go to current demo page for Date Picker.
https://react.lightningdesignsystem.com/components/date-pickers/

Let's say you don't want to use the widget to navigate to a date but instead you know the exact date and format you would like to type in. Click on the input box and start typing. You will find that the second you enter a number the picker widget closes and the box auto-completes to a date you didn't intend to enter.

If you have a better solution that would allow users to enter the date using the keyboard manually I would gladly review it.

@chuyler
Copy link
Author

@interactivellama Could you provide an update on this? I'd really like to get this merged. If you have a better solution I'm all ears.

@anujsingla
Copy link

@interactivellama
Could you please review this MR? We are also facing the same issue in our project

@chuyler
Copy link
Author

Someone please review this change so we can merge it.

@interactivellama
Copy link
Contributor

@chuyler I'll take another look. I'm hesitant to change the existing interaction pattern, but I do empathize with the need to support dates not fully written out.

@chuyler
Copy link
Author

@chuyler I'll take another look. I'm hesitant to change the existing interaction pattern, but I do empathize with the need to support dates not fully written out.

The exsiting interaction pattern does not work. You cannot type dates in, you cannot copy/paste dates from another field. This behavior works fine on standard Salesforce pages but fails with any page developed with this library.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Datepicker: Unable to enter date manually

3 participants

@chuyler@interactivellama@anujsingla

[8]ページ先頭

©2009-2025 Movatter.jp