fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM #9768

eriklharper · 2024-07-12T22:33:22Z

Related Issue: #7155

Summary

This issue resolves some issues that happen when corresponding calcite-tab and calcite-tab-title elements are removed from the DOM when they are closed.

…lharper/7155-closable-tab-bug

…Elements

…ssigned tab elements instead of using the tabs state variable. This fixes an uncaught exception that can occur when the tab element is removed in the calciteTabClose event handler.

… their definitions

…o fix issue of not being able to click tab to the right of a closed tab

…Id watcher. The selectedTitle is already updated in the same place where selectedTabId is.

…lharper/7155-closable-tab-bug

…alcite-design-system into eriklharper/7155-closable-tab-bug

…lharper/7155-closable-tab-bug

jcfranco

🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊
🧊🚫🧊🧊🧊🚫🧊🧊🚫🚫🧊🧊🚫🚫🚫🧊🧊🚫🚫🚫🧊🚫🚫🚫🚫🧊🚫🧊
🧊🚫🚫🧊🧊🚫🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🧊🧊🚫🧊🧊🧊🧊🚫🧊
🧊🚫🧊🚫🧊🚫🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🧊🧊🚫🚫🚫🧊🧊🚫🧊
🧊🚫🧊🧊🚫🚫🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🚫🧊🧊🧊🧊🚫🧊🧊🧊🧊🧊🧊
🧊🚫🧊🧊🧊🚫🧊🧊🚫🚫🧊🧊🚫🚫🚫🧊🧊🚫🚫🚫🧊🚫🚫🚫🚫🧊🚫🧊
🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊

packages/calcite-components/src/utils/dom.ts

jcfranco · 2024-07-19T17:11:43Z

packages/calcite-components/src/utils/dom.ts

    flatten: true,
  });
+  return selector ? (filterElementsByCSSSelector(assignedElements, selector) as T[]) : (assignedElements as T[]);


I think you can avoid all typecasting if you pass T (after the generic type is updated) as the type to supporting functions:

return selector ? filterElementsByCSSSelector<T>(assignedElements, selector) : assignedElements;

Works for the filter* function call, but not for the assignedElements variable:

packages/calcite-components/src/utils/dom.ts

packages/calcite-components/src/components/tabs/tabs.tsx

packages/calcite-components/src/utils/dom.ts

eriklharper · 2024-07-19T19:18:53Z

@driskull:

What is the use case for getting assigned elements from a slot at a time other than an onSlotChange event?

Use case is when you have a ref to a <slot> element and want to get its assignedElements on-the-fly so that you don't have to store that information in a state variable. This allows you to use the DOM as the source of truth of how many tabs you have instead of having to manage a separate state variable to keep track of them.

This fix is attempting to better gracefully handle the removal of tab-title and tab dom nodes, which are being removed in a calciteTabClose event listener, which fires before this getTabTitleById async process completes, so an uncaught exception would happen when a removed dom node was attempting to access its parentElement property, which is undefined because it was removed from the document.

…lharper/7155-closable-tab-bug

…-to-monorepo * origin/dev: chore: release next fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM (#9768) chore: add runtime component deprecation warnings (#9821) build(deps): drop unnecessary @types/prettier dep (#9833) build: update browserslist db (#9822) build(deps): update dependency dayjs to v1.11.12 (#9824) build(deps): update dependency semver to v7.6.3 (#9825)

…le and tab elements from the DOM (#9768) **Related Issue:** #7155 ## Summary This issue resolves some issues that happen when corresponding `calcite-tab` and `calcite-tab-title` elements are removed from the DOM when they are closed.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> ## [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/[email protected]) (2024-07-31) ### Miscellaneous Chores * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) ### Features * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) ### Bug Fixes * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.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>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/[email protected]) (2024-07-31) * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.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>

Cherry-pick the release commit from `main`. --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/[email protected]) (2024-07-31) * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-07-31) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.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> **Related Issue:** # ## Summary Co-authored-by: Calcite Admin <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

eriklharper added 5 commits June 11, 2024 17:20

fix(tabs): fix closing behavior when tabs are removed from the DOM

1b883db

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

33a7897

…lharper/7155-closable-tab-bug

moving lifecycle members to the bottom of the tabs file

f5bb30c

refactoring tab-nav's slotchange handler to use slotChangeGetAssigned…

7ae928b

…Elements

Refactoring registryHandler to query for the default slot element's a…

04dcc8d

…ssigned tab elements instead of using the tabs state variable. This fixes an uncaught exception that can occur when the tab element is removed in the calciteTabClose event handler.

eriklharper self-assigned this Jul 12, 2024

eriklharper added 10 commits July 12, 2024 15:54

adding tab identifier logs for debugging

2baeda4

relocating selectedTitle and selectedTabId watchers to be adjacent to…

8b61305

… their definitions

removing unused internalTabRegister event

575dfb6

removing logs

a8a08e8

emitting internalTabChange event from selectedTitle watcher for now t…

69e59fd

…o fix issue of not being able to click tab to the right of a closed tab

remove redundant setting of selectedTitle from inside the selectedTab…

361eb54

…Id watcher. The selectedTitle is already updated in the same place where selectedTabId is.

removing comment

73db0ff

reverting tab-title change no longer needed

e812bbd

fixing highlight selected title on initial load

a4df2e7

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

59a7d64

…lharper/7155-closable-tab-bug

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 15, 2024

eriklharper marked this pull request as ready for review July 15, 2024 23:56

eriklharper requested a review from a team as a code owner July 15, 2024 23:56

eriklharper added 6 commits July 16, 2024 09:43

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

45ce9dd

…lharper/7155-closable-tab-bug

removing select-none

4d92c18

Merge branch 'eriklharper/7155-closable-tab-bug' of github.com:Esri/c…

9b1a53c

…alcite-design-system into eriklharper/7155-closable-tab-bug

adding dom removal test

58384cd

adding closable tabs to demo page

e00a764

Merge branch 'eriklharper/7155-closable-tab-bug' of github.com:Esri/c…

a001a0a

…alcite-design-system into eriklharper/7155-closable-tab-bug

eriklharper requested review from jcfranco and Elijbet July 16, 2024 21:50

eriklharper added 3 commits July 16, 2024 14:51

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

3e7f77b

…lharper/7155-closable-tab-bug

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

1a023c5

…lharper/7155-closable-tab-bug

component types

cfb1626

eriklharper and others added 4 commits July 17, 2024 11:43

renaming registryHandler to updateAriaSettings

a8dbcdb

removing need to data-name attributes in e2e test

c27ccf1

replacing mutation observer logic with slot change handler

ce4c4ee

Merge branch 'dev' into eriklharper/7155-closable-tab-bug

568bd7b

alisonailea approved these changes Jul 18, 2024

View reviewed changes

jcfranco approved these changes Jul 19, 2024

View reviewed changes

driskull reviewed Jul 19, 2024

View reviewed changes

packages/calcite-components/src/components/tabs/tabs.tsx Show resolved Hide resolved

packages/calcite-components/src/utils/dom.ts Outdated Show resolved Hide resolved

driskull reviewed Jul 19, 2024

View reviewed changes

packages/calcite-components/src/utils/dom.ts Outdated Show resolved Hide resolved

updating to use generic types where possible

3243cf9

eriklharper and others added 4 commits July 19, 2024 13:57

renaming function

d8b524b

Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…

2110d0a

…lharper/7155-closable-tab-bug

adding spec unit tests for getSlotAssignedElements

3db06f4

Merge branch 'dev' into eriklharper/7155-closable-tab-bug

376dd40

eriklharper added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 23, 2024

adding one more test for empty results

5afaf2e

eriklharper 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 Jul 23, 2024

eriklharper merged commit d945793 into dev Jul 23, 2024
12 checks passed

eriklharper deleted the eriklharper/7155-closable-tab-bug branch July 23, 2024 17:30

github-actions bot added this to the 2024-07-30 - Jul Release milestone Jul 23, 2024

calcite-admin mentioned this pull request Jul 30, 2024

chore: release main #9716

Merged

benelan mentioned this pull request Jul 31, 2024

chore: release main (#9716) #9916

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM #9768

fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM #9768

eriklharper commented Jul 12, 2024

jcfranco left a comment

jcfranco Jul 19, 2024

eriklharper Jul 19, 2024

eriklharper commented Jul 19, 2024

fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM #9768

fix(tabs): handle tab close events that remove the associated tab-title and tab elements from the DOM #9768

Conversation

eriklharper commented Jul 12, 2024

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Jul 19, 2024

Choose a reason for hiding this comment

eriklharper Jul 19, 2024

Choose a reason for hiding this comment

eriklharper commented Jul 19, 2024