Skip to content

fix(editor): NO-JIRA fixed shadow dom issues with editor#1107

Merged
Maysam Kangarani Farahani (maysamkf) merged 4 commits intostagingfrom
fix-editor-tooltip-issue
Mar 9, 2026
Merged

fix(editor): NO-JIRA fixed shadow dom issues with editor#1107
Maysam Kangarani Farahani (maysamkf) merged 4 commits intostagingfrom
fix-editor-tooltip-issue

Conversation

@maysamkf
Copy link
Copy Markdown
Contributor

@maysamkf Maysam Kangarani Farahani (maysamkf) commented Mar 6, 2026 •
edited
Loading

fixed shadow dom issues with editor

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix
  • Feature
  • Performance Improvement
  • Refactor

📖 Description

  • Added externalAnchorElement for each v-dt-tooltip in editor
  • Replaced document.querySelector with this.$el.getRootNode().querySelector to work with shadow dom

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all Vue changes:

  • I have added / updated unit tests.
  • I have validated components with a screen reader.
  • I have validated components keyboard navigation.

📷 Screenshots / GIFs

🔗 Sources

PR for tooltip shadow dom fix

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 6, 2026

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@maysamkf Maysam Kangarani Farahani (maysamkf) marked this pull request as ready for review March 6, 2026 23:31
@maysamkf Maysam Kangarani Farahani (maysamkf) added the no-visual-test Add this tag when the PR does not need visual testing label Mar 6, 2026
braddialpad
Brad Paugh (braddialpad) requested changes Mar 9, 2026
View reviewed changes
Comment thread packages/dialtone-vue/recipes/conversation_view/editor/editor.vue Outdated

colorPickerInput() {
return document.querySelector('.colorPickerInput');
return this.$el.getRootNode().querySelector('.colorPickerInput');
Copy link
Copy Markdown
Contributor

@braddialpad Brad Paugh (braddialpad) Mar 9, 2026

Choose a reason for hiding this comment

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

In vue 3, try to avoid using this.$el. The reason for this is that vue 3 supports multiple root elements so what $el returns is somewhat unpredictable. It probably works fine in the current case, but if the template changes in the future it might not be. It's best practice to instead use a ref directly on an element

Copy link
Copy Markdown
Contributor Author

@maysamkf Maysam Kangarani Farahani (maysamkf) Mar 9, 2026

Choose a reason for hiding this comment

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

Thanks, fixed now!

braddialpad
Brad Paugh (braddialpad) approved these changes Mar 9, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@braddialpad Brad Paugh (braddialpad) left a comment

Choose a reason for hiding this comment

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

Thanks!

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 9, 2026

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1107/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1107/

@maysamkf Maysam Kangarani Farahani (maysamkf) merged commit 82f8c72 into staging Mar 9, 2026
18 checks passed
@maysamkf Maysam Kangarani Farahani (maysamkf) deleted the fix-editor-tooltip-issue branch March 9, 2026 17:25
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Mar 9, 2026
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue/v3.213.0
90bba5a 
# [3.213.0](dialtone-vue/v3.212.0...dialtone-vue/v3.213.0) (2026-03-09)

### Bug Fixes

* **Editor:** NO-JIRA fixed shadow dom issues with editor ([#1107](#1107)) ([82f8c72](82f8c72))

### Features

* **Button:** DLT-3086 update loading state to use dt-loader component ([#1111](#1111)) ([621c49a](621c49a))
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Mar 9, 2026
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.169.0
311ee69 
# [9.169.0](dialtone/v9.168.0...dialtone/v9.169.0) (2026-03-09)

### Bug Fixes

* **Editor:** NO-JIRA fixed shadow dom issues with editor ([#1107](#1107)) ([82f8c72](82f8c72))

### Features

* **Button:** DLT-3086 update loading state to use dt-loader component ([#1111](#1111)) ([621c49a](621c49a))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@braddialpad Brad Paugh (braddialpad) braddialpad approved these changes

@iropolo Ignacio Ropolo (iropolo) Awaiting requested review from iropolo iropolo is a code owner

@francisrupert Francis Rupert (francisrupert) Awaiting requested review from francisrupert francisrupert is a code owner

@ninarepetto Nina Repetto (ninarepetto) Awaiting requested review from ninarepetto ninarepetto is a code owner

Assignees

@maysamkf Maysam Kangarani Farahani (maysamkf)

Labels

no-visual-test Add this tag when the PR does not need visual testing

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@maysamkf @braddialpad