Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(input-date-picker): reset active date picker date after closing #7219

Merged
merged 10 commits into from
Jun 27, 2023
Merged

fix(input-date-picker): reset active date picker date after closing #7219

merged 10 commits into from
Jun 27, 2023

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Jun 24, 2023 •
edited by benelan
Loading

Related Issue: #6495

Summary

This ensures the active date is reset properly after a calcite-input-date-picker's date picker is closed (either by blurring or selecting a date).

Notes

@jcfranco jcfranco requested a review from a team as a code owner June 24, 2023 04:45
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 24, 2023
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 24, 2023
benelan
benelan approved these changes Jun 26, 2023
View reviewed changes
Copy link
Member

@benelan benelan left a comment

Choose a reason for hiding this comment

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

LGTM

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

await page.keyboard.press("Tab");
await page.keyboard.type("1/");
await page.waitForChanges();

expect(await getInputValue()).toBe("١‏/");
expect(await getDateInputValue(page)).toBe("١‏/");
Copy link
Member

Choose a reason for hiding this comment

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

thanks for hanging that up to DRY!

packages/calcite-components/src/tests/utils.ts
@@ -268,7 +268,7 @@ export async function newProgrammaticE2EPage(): Promise<E2EPage> {
*/
export async function skipAnimations(page: E2EPage): Promise<void> {
await page.addStyleTag({
content: `:root { --calcite-duration-factor: 0; }`
content: `:root { --calcite-duration-factor: 0.01; }`
Copy link
Member

Choose a reason for hiding this comment

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

Can you explain why changing this to 0.1 is required, is it a chromatic thing?

Copy link
Member Author

Choose a reason for hiding this comment

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

Sure. It's to work around this issue.

Good catch though. I'll add a comment to this for context.

jcfranco and others added 9 commits June 26, 2023 11:59
@jcfranco
Merge branch 'master' into jcfranco/6495-reset-range-state-when-input…
f90a1ef 
…-date-picker-is-closed
@benelan
Merge branch 'master' into jcfranco/6495-reset-range-state-when-input…
56723b8 
…-date-picker-is-closed
@benelan
Merge branch 'master' into jcfranco/6495-reset-range-state-when-input…
fef8943 
…-date-picker-is-closed
@benelan
Merge branch 'master' into jcfranco/6495-reset-range-state-when-input…
ba3b930 
…-date-picker-is-closed
@benelan
Merge branch 'master' into jcfranco/6495-reset-range-state-when-input…
e5b456f 
…-date-picker-is-closed
@jcfranco
add context to skipAnimation util workaround
f8355d4
@jcfranco
wait for changes after component clicks
05fba22
@jcfranco
update expected focus targets for dropdown test caused by animation s…
501e07d 
…kip fix
@jcfranco
restore disabled focus target testing for non-"none" focus targets
70420b6
@jcfranco
Copy link
Member Author

Extracted the restoring of missing focus assertions to a separate PR: #7235

@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 27, 2023
@jcfranco jcfranco merged commit 91b2a1b into master Jun 27, 2023
@jcfranco jcfranco deleted the jcfranco/6495-reset-range-state-when-input-date-picker-is-closed branch June 27, 2023 22:43
@github-actions github-actions bot added this to the 2023 July Priorities milestone Jun 27, 2023
@calcite-admin calcite-admin mentioned this pull request Jun 27, 2023
Closed
benelan added a commit that referenced this pull request Jun 28, 2023
@jcfranco @benelan
fix(input-date-picker): reset active date picker date after closing (#…
005836d 
…7219)

**Related Issue:** #6495 

## Summary

This ensures the active date is reset properly after a
`calcite-input-date-picker`'s date picker is closed (either by blurring
or selecting a date).

## Notes

* This adds an internal `reset` method that can be made public in the
future if needed.
* There was an existing `reset` method prior to these changes that seems
to clear the active date when the date picker is blurred or when
`Escape` is pressed. We should revisit this behavior since it was [added
when the input and date picker were a single
component](https://github.com/Esri/calcite-components/blob/v1.0.0-beta.22/src/components/calcite-date/calcite-date.tsx#L263-L270)
and it does seem odd to have the date-picker reset in these scenarios.
cc @macandcheese @SkyeSeitz @ashetland
* Utility test methods to interact with internal components were added
and tests were updated to leverage them
* Slightly increases the duration factor in the tests to work around
#6604

---------

Co-authored-by: Ben Elan <[email protected]>
@calcite-admin calcite-admin mentioned this pull request Jul 1, 2023
Merged
benelan pushed a commit that referenced this pull request Aug 3, 2023
@calcite-admin @github-actions
chore: release latest (#7261)
45b5c01 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-components: 1.5.0</summary>

##
[1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-08-03)


### Features

* **action-group:** Adds overlayPositioning property.
([#7366](#7366))
([ca9f35a](ca9f35a))
* Allow sharing focus trap stacks via configuration global
([#7334](#7334))
([934a19f](934a19f))
* Automatically import and define Calcite Components when importing
their React wrapper
([#7185](#7185))
([bf0ff67](bf0ff67))
* **block, block-section:** Add setFocus method
([#7208](#7208))
([35d4bbb](35d4bbb))
* **block:** Improve block's content layout to allow scrolling
([#7367](#7367))
([ecbf17b](ecbf17b))
* **color-picker:** Replaces thumb focus outline to rounded
([#7378](#7378))
([d803980](d803980))
* **filter:** Add filter method
([#7127](#7127))
([5a4283f](5a4283f))
* **flow:** Adds setFocus method
([#7252](#7252))
([2472c58](2472c58))
* Improve focus behavior in components
([#7277](#7277))
([ad9fbca](ad9fbca))
* **input-time-zone:** Add input-time-zone component
([#6947](#6947))
([87bd496](87bd496))
* **list:** Add slots for filter actions
([#7183](#7183))
([da07ab1](da07ab1))
* **list:** Add support for dragging items.
([#7109](#7109))
([7324f70](7324f70))
* **menu-item:** Update spacing and icon layout
([#7381](#7381))
([5659671](5659671))
* **navigation-logo:** Increase font-size of heading with no description
([#7081](#7081))
([355e101](355e101))
* **switch:** Updates focus outline to be rounded
([#7390](#7390))
([2616b82](2616b82))
* **text-area:** Provide additional context for AT users when character
limit exceeds
([#7299](#7299))
([c5678eb](c5678eb))
* **text-area:** Provide additional context for AT users when character
limit exceeds
([#7412](#7412))
([c1af3c7](c1af3c7))


### Bug Fixes

* **accordion, accordion-item:** `icon-position`, `icon-type`,
`selection-mode` and `scale` can now be set as props or attributes
([#7191](#7191))
([2b09aba](2b09aba))
* **action-bar:** No longer delegates focus when clicked on
non-focusable region
([#7310](#7310))
([1a9c15c](1a9c15c))
* **action:** Correctly focus the button after rendering updates.
([#7255](#7255))
([40fe2ce](40fe2ce))
* **block:** Loader now appears for all loading cases
([#7303](#7303))
([5af3600](5af3600))
* **block:** Removes extra loading indicator
([#7239](#7239))
([a334a75](a334a75))
* **card:** Ensure teardown logic is called when disconnected
([#7289](#7289))
([d07e322](d07e322))
* **chip:** Disconnect mutation observer when component is disconnected
from the DOM
([#7418](#7418))
([412e5fb](412e5fb))
* **color-picker:** Draw slider thumbs within bounds
([#7398](#7398))
([2f37854](2f37854))
* **color-picker:** Fix opacity slider keyboard nudging
([#7400](#7400))
([2b4f7c3](2b4f7c3))
* **color-picker:** Maintains correct numbering system when entering
invalid RGB value
([#7327](#7327))
([8d2a3a5](8d2a3a5))
* **combobox:** Add space after grouped items
([#7302](#7302))
([b1580c7](b1580c7))
* **dropdown-item:** Provides accessible label when href is not parsed
([#7316](#7316))
([966b83d](966b83d))
* **flow:** Call setFocus() on back button click
([#7285](#7285))
([9102aa4](9102aa4))
* **input-date-picker:** Provides placeholder text context for AT users
([#7320](#7320))
([31e0ba2](31e0ba2))
* **input-date-picker:** Reset active date picker date after closing
([#7219](#7219))
([91b2a1b](91b2a1b))
* **input, input-number:** No longer removes trailing decimal separator
([#7159](#7159))
([01535cf](01535cf))
* **link:** Adds outline-offset to avoid overlapping with text.
([#7342](#7342))
([c30db4e](c30db4e))
* **list:** Changing filterText property will now update filtered items
([#7133](#7133))
([a9c0bce](a9c0bce))
* **list:** Fix keyboard navigation after a listItem's disabled or
closed property changes
([#7275](#7275))
([91d28eb](91d28eb))
* **list:** Fix keyboard navigation when filterEnabled is true
([#7385](#7385))
([41a2e42](41a2e42))
* **menu-item:** Prevent duplicate border in nested vertical menu-items
([#7387](#7387))
([186a738](186a738))
* **panel:** Remove double border styling when content isn't provided
([#7368](#7368))
([91a0610](91a0610))
* Remove style modifying all host components with hidden attribute
([#7346](#7346))
([3103e2f](3103e2f))
* **scrim:** Update loader scale on resize of component.
([#7419](#7419))
([24e7f70](24e7f70))
* **slider:** Prevent excessive tick rendering
([#7421](#7421))
([c799409](c799409))
* **switch:** Fix for focus outline style in certain cases
([#7414](#7414))
([217324f](217324f))
* **tab-title:** Add full focus outline to closable tab button in high
contrast mode
([#7272](#7272))
([d812d17](d812d17))
* **tooltip:** Avoid extra before open/close event emitting
([#7422](#7422))
([dbb6818](dbb6818))
* **tooltip:** Deprecate the label property due to the description
coming from the component's content
([#7247](#7247))
([7934d75](7934d75))
* **tooltip:** Emits `close` and `beforeClose` events when container is
set to `display:none`
([#7258](#7258))
([60a4683](60a4683))
* **tooltip:** Ensure --calcite-app-z-index-tooltip is applied
([#7345](#7345))
([a9a7072](a9a7072))
</details>

<details><summary>@esri/calcite-components-react: 1.5.0</summary>

##
[1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-08-03)


### Features

* Automatically import and define Calcite Components when importing
their React wrapper
([#7185](#7185))
([bf0ff67](bf0ff67))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@benelan benelan benelan approved these changes

Assignees

@jcfranco jcfranco

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 July Priorities
Development

Successfully merging this pull request may close these issues.
2 participants
@jcfranco @benelan