-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(DatePicker): remove decorative svg as a click target #10283
fix(DatePicker): remove decorative svg as a click target #10283
Conversation
✔️ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: 1fc3b11 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61bcf300b83d480009a50663 😎 Browse the preview: https://deploy-preview-10283--carbon-react-next.netlify.app |
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: 1fc3b11 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61bcf300f99fa80008f19cc4 😎 Browse the preview: https://deploy-preview-10283--carbon-elements.netlify.app |
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 02d8cfc 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61b8eb6bd58a13000792b77d 😎 Browse the preview: https://deploy-preview-10283--carbon-components-react.netlify.app |
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 1fc3b11 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61bcf3007478530007fe9b43 😎 Browse the preview: https://deploy-preview-10283--carbon-components-react.netlify.app |
@dakahn I just made two updates to this:
The storybook now shows the intended functionality; clicking the calendar icon is technically clicking/focusing the input, which opens the calendar. Tests pass. clicking.icon.focuses.input.opens.calendar.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A couple considerations for avoiding breaking changes.
packages/react/src/components/DatePickerInput/DatePickerInput.js
Outdated
Show resolved
Hide resolved
Tests were failing because the DatePicker was still using the deprecated |
@joshblack could you share more on how to get the autocomplete list to pop? I can't repro in chrome, firefox, or safari. I'm not sure how/why these changes would impact the browser's autocomplete. We could place |
@tay1orjones I think it's because before we were never interacting with the input, whereas now we are in order to trigger the appearance of the date picker. As to how to get the autocomplete, great question lol. I have no idea how it's picking up dates in this situation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me! I also wasn't able to recreate the autocomplete @joshblack was experiencing either but auto complete can be fickle. Reminds me of this old issue, solving it isn't super clear cut and I don't personally think it has to prevent this PR from being merged in
* chore(npm): update version to beta * chore(workflow): add gh-pages publishing workflow * Update .github/workflows/deploy-cwc-v2-beta.yml Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update .github/workflows/deploy-cwc-v2-beta.yml Co-authored-by: andrew <emyarod@users.noreply.github.com> --------- Co-authored-by: andrew <emyarod@users.noreply.github.com>
Closes #8865
Closes #9815
The small decorative calendars were click targets. This was causing weird issue with the second calendar opening and setting the first input. Seems to me they should just not receive pointer events at all which seems to address the problem.
Testing / Reviewing
🏄🏾