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

feat(action-menu): Close menu on blur instead of on tab key. #8577

Merged
merged 10 commits into from
Jan 10, 2024
Merged

feat(action-menu): Close menu on blur instead of on tab key. #8577

merged 10 commits into from
Jan 10, 2024

Conversation

driskull
Copy link
Member

@driskull driskull commented Jan 9, 2024 •
edited by jcfranco
Loading

Related Issue: N/A

Summary

  • Refactor logic to rely on focus out instead of tab key
  • Update test

@github-actions github-actions bot added the testing Issues related to automated or manual testing. label Jan 9, 2024
@driskull driskull marked this pull request as ready for review January 9, 2024 23:53
@driskull driskull requested a review from a team as a code owner January 9, 2024 23:53
@jcfranco jcfranco changed the title test(action-menu): Fix tab focus out test. test(action-menu): Fix tab focus out test Jan 9, 2024
jcfranco
jcfranco reviewed Jan 10, 2024
View reviewed changes
packages/calcite-components/src/components/action-menu/action-menu.e2e.ts Outdated
await page.keyboard.press("Tab");

const button = await page.find("button");
button.focus();
Copy link
Member

Choose a reason for hiding this comment

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

This needs to be awaited on since it returns a promise (find/findAll returns an E2EElement).

Also, wouldn't pressing tab still cause the menu to blur?

Copy link
Member Author

@driskull driskull Jan 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Also, wouldn't pressing tab still cause the menu to blur?

Yes. The blur event is just a better approach

Copy link
Member

Choose a reason for hiding this comment

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

Could you expand on that? I'm asking since we use the tab key to trigger blurring in other tests.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, It just makes more sense to rely on the blur event rather than a key event because the blur event can occur if another element/component steals focus whereas the tab is relying only on that keyboard event.

Copy link
Member

@jcfranco jcfranco Jan 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I should clarify, I'm talking specifically about the test changes, not the component change to use blur vs tab key. WRT the component changes themselves, I'd even consider this a feat since it improves the closing behavior.

Copy link
Member Author

Choose a reason for hiding this comment

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

I just changed from tab to blur since there is some kind of timing issue with the tab I think.

@driskull driskull added the skip visual snapshots Pull requests that do not need visual regression testing. label Jan 10, 2024
@driskull driskull requested a review from jcfranco January 10, 2024 00:43
jcfranco
jcfranco approved these changes Jan 10, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Noice! Thanks for stabilizing this test.

I had a comment about maybe not needing changes on the test (for consistency and simplicity) and this possibly being feat since it improves closing behavior.

@driskull driskull changed the title test(action-menu): Fix tab focus out test feat(action-menu): Close menu when blur instead of on tab key. Jan 10, 2024
@driskull driskull changed the title feat(action-menu): Close menu when blur instead of on tab key. feat(action-menu): Close menu on blur instead of on tab key. Jan 10, 2024
@driskull driskull merged commit ccfbd0c into main Jan 10, 2024
15 checks passed
@driskull driskull deleted the dris0000/action-menu-test-fix branch January 10, 2024 16:47
@calcite-admin calcite-admin mentioned this pull request Jan 10, 2024
Merged
benelan added a commit that referenced this pull request Jan 10, 2024
@benelan
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
51bccc8 
…ion-message

* origin/main:
  docs: update component READMEs (#8553)
  chore: release next
  feat(action-menu): Close menu on blur instead of on tab key. (#8577)
  fix(input, input-number): support setting value property to Infinity (#8547)
benelan added a commit that referenced this pull request Jan 10, 2024
@benelan
Merge remote-tracking branch 'origin/main' into benelan/8000-form-val…
fa314e4 
…idation-ui

* origin/main:
  docs: update component READMEs (#8553)
  chore: release next
  feat(action-menu): Close menu on blur instead of on tab key. (#8577)
  fix(input, input-number): support setting value property to Infinity (#8547)
geospatialem pushed a commit that referenced this pull request Jan 17, 2024
@calcite-admin @github-actions
chore: release main (#8455)
3709f80 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.1</summary>

##
[2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Bug Fixes

* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))
</details>

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

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Features

* **action-menu:** Close menu on blur instead of on tab key.
([#8577](#8577))
([ccfbd0c](ccfbd0c))
* **checkbox, combobox, input-date-picker, input-time-picker,
segmented-control, select:** Add required property
([#8517](#8517))
([72a1ce4](72a1ce4))
* **handle, block, list-item:** Improve drag handle tooltip to include
item label
([#8584](#8584))
([6e643e2](6e643e2))
* **handle:** Add `blurUnselectDisabled` property to disable unselecting
handle on blur.
([#8483](#8483))
([4d665cc](4d665cc))
* **handle:** Add selected property and calciteHandleChange event.
([#8484](#8484))
([d2e9880](d2e9880))
* **list-item:** Add dragSelected property and
calciteListItemDragHandleChange event
([#8524](#8524))
([4db2eb7](4db2eb7))
* **list-item:** Add tooltip for expanding and collapsing
([#8612](#8612))
([4964491](4964491))
* **list:** Add "filter-no-results" slot to display content when no
filtered items are shown
([#8569](#8569))
([f1fc7f6](f1fc7f6))
* **list:** Introduce clearer unselected state
([#8510](#8510))
([f1e836c](f1e836c))
* **radio-button-group, segmented control:** Add validationMessage,
validationIcon, and status properties
([#8561](#8561))
([d4c5efc](d4c5efc))
* Reflect validationIcon property
([#8583](#8583))
([b3d38b3](b3d38b3))
* **table-header:** Add style when within a `selected` Table Row
([#8449](#8449))
([13cfe75](13cfe75))
* **tabs:** Emit selection-related events when selection is modified
after closing the selected tab
([#8582](#8582))
([b15c940](b15c940))
* **tile:** Add visual scales
([#8496](#8496))
([7638ec4](7638ec4))
* Use input-message to display validation messages for invalid fields
after form submission
([#8574](#8574))
([fd392fe](fd392fe))


### Bug Fixes

* **action:** Update component tokens to support transparent
([#8532](#8532))
([81cb5cc](81cb5cc))
* Allow users to control tabindex on interactive components
([#8166](#8166))
([b15c052](b15c052))
* **button:** Avoid needlessly overwriting title
([#8491](#8491))
([350a983](350a983))
* **color-picker:** Emit color change when nudging color channels by
using the shift key
([#8579](#8579))
([4250598](4250598))
* **combobox:** Only allow deleting visible chips with the keyboard
([#8603](#8603))
([2d38241](2d38241))
* **date-picker:** Prevent console error when selecting just an end date
for input date picker
([#8444](#8444))
([c0e51c3](c0e51c3))
* **filter:** Prevent console warning from displaying to end users
([#8458](#8458))
([0de7646](0de7646))
* **input-date-picker:** Ensure range icon toggles open corresponding
date-picker
([#8554](#8554))
([cfafd15](cfafd15))
* **input-date-picker:** Resolve a hard to reproduce number formatter
caching issue that occurred due to the countdown delay in queued Alerts.
([5f4fa3e](5f4fa3e))
* **input-message:** Add missing margin to scale="s", spacing CSS
variable has effect
([#8592](#8592))
([49b0a20](49b0a20))
* **input, input-number, input-text:** Restore focus on input after
browser validation error is displayed and user continues typing
([#8563](#8563))
([5897965](5897965))
* **input, input-number:** Support setting value property to Infinity
([#8547](#8547))
([f6ac698](f6ac698))
* **list-item:** Store last focused cell from focusing on elements
within a cell.
([#8494](#8494))
([28f93b4](28f93b4))
* **list, list-item, list-item-group:** Honor hidden attribute on
list-item and list-item-group
([#8541](#8541))
([3851dc6](3851dc6))
* **list:** Correct selectedItems value when list is filtered
([#8481](#8481))
([9de1922](9de1922))
* **list:** Fix event detail newIndex when down arrow pressed to sort
([#8462](#8462))
([b3d5169](b3d5169))
* **list:** Fix keyboard arrow navigation
([#8470](#8470))
([57fdaa4](57fdaa4))
* **modal:** Ensure focus trapping in dynamically created, subsequently
opened modals
([#8593](#8593))
([4ec6b94](4ec6b94))
* **table:** Fix double border on `bordered` Table Rows in
`table-footer`
([#8509](#8509))
([c16ea33](c16ea33))
* **table:** Improve Table overflow behavior
([#8424](#8424))
([79743e1](79743e1))
* **text-area:** Prevent infinite render loop when `max-length` property
is defined
([#8610](#8610))
([f30d933](f30d933))


### Reverts

* Chore(modal): remove e2e tests that are covered by dedicated openClose
commonTests helper
([#8392](#8392))
([#8471](#8471))
([4bedf99](4bedf99))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1
</details>

<details><summary>@esri/calcite-components-angular: 2.2.0</summary>

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

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

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

##
[2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-01-17)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.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>
driskull added a commit that referenced this pull request Jan 19, 2024
@driskull
Revert "feat(action-menu): Close menu on blur instead of on tab key. (#…
dd68da0 
…8577)"

This reverts commit ccfbd0c.

# Conflicts:
#	packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@driskull driskull mentioned this pull request Jan 19, 2024
Merged
driskull added a commit that referenced this pull request Jan 19, 2024
@driskull
fix(action-menu): clicking an action menu item should call click even…
b12ef6b 
…t. (#8627)

**Related Issue:** #8577 #8628

## Summary

- This reverts commit ccfbd0c.
- Adds test
@calcite-admin calcite-admin mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

Assignees

@driskull driskull

Labels
skip visual snapshots Pull requests that do not need visual regression testing. testing Issues related to automated or manual testing.
Projects
None yet
Milestone
2024-01-17 - Jan Main Release
Development

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