feat(tabs): emit selection-related events when selection is modified after closing the selected tab #8582
+109
−23
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…after closing the selected tab
|
@Elijbet Since the closing behavior affects |
driskull
reviewed
Jan 10, 2024
| @@ -396,6 +397,10 @@ export class TabNav { | |||
| if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) { | |||
| tabTitles[visibleTabTitlesIndices[0]].closable = false; | |||
| this.selectedTabId = visibleTabTitlesIndices[0]; | |||
|
|
|||
| if (selectionModified) { | |||
| tabTitles[visibleTabTitlesIndices[0]].click(); // trigger selection-related events since they were modified after user interaction | |||
There was a problem hiding this comment.
nitpick: It seems a little odd to be handling this using a click since a click will bubble up and could potentially trigger other unknown things higher in the DOM.
Maybe in the future we could refactor this to handle the use case without having to trigger a click of an element? Just throwing thoughts out there :) I know we do use .click() in other places but its something we should think about possibly.
There was a problem hiding this comment.
100% agreed. I'll update this PR to add an internal method to only trigger the tab-related events and will create a refactor issue to introduce a tabs controller that tabs and its structure could share to make this cleaner. There's a lot of eventing going back and forth and it's getting quite complex.
There was a problem hiding this comment.
Internal method added and click no longer used. Can you take another look? 🙇♂️
Merged
benelan
added a commit
that referenced
this pull request
Jan 12, 2024
…idation-ui * origin/main: feat(handle, block, list-item): improve drag handle tooltip to include item label (#8584) chore: release next feat: reflect validationIcon property (#8583) chore: release next docs: improve consistency for component prop descriptions (#8580) test(action-menu): skip close on blur test. (#8585) feat(tabs): emit selection-related events when selection is modified after closing the selected tab (#8582)
geospatialem
pushed a commit
that referenced
this pull request
Jan 17, 2024
🤖 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/calcite-design-tokens@2.1.0...@esri/calcite-design-tokens@2.1.1) (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/calcite-components@2.1.0...@esri/calcite-components@2.2.0) (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/calcite-components-angular@2.1.0...@esri/calcite-components-angular@2.2.0) (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/calcite-components-react@2.1.0...@esri/calcite-components-react@2.2.0) (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>
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #7221
Summary
This will help users know when the selected
tab-titleandtabhave changed after closing.