-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix typing in editable elements inside of open shadow DOM (#15774)
* Add a test case for typing in an input in shadow DOM * Introduce `.jp-mod-readWrite` class exposing `:read-write` Contrarily to `:read-write` the new class can be used to detect the focus state of editable elements buried in the open shadow DOM. * Document keyboard interactions in outputs/`lm-suppress-shortcuts` * Implement `.jp-mod-readWrite` in console too, rename and move the utility function (`hasActiveEditableElement`) to DOMUtils as it is now used in both notebook and console, add tests for this function. * Keep the `:not(:read-write)` part on `[data-jp-kernel-user]` to err on the side of caution, as these could be used in donwstream widgets for which we do not control the DOM so these could lack the newly added `:not(.jp-mod-readWrite)` * Fix a typo in a test file * Align the selector migration rule * Use `toggle` to simplify the code Co-authored-by: Nicolas Brichet <32258950+brichet@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: gabalafou <gabriel@fouasnon.com> * Correct TODO comment Co-authored-by: gabalafou <gabriel@fouasnon.com> * Fix hanging bracket --------- Co-authored-by: Nicolas Brichet <32258950+brichet@users.noreply.github.com> Co-authored-by: gabalafou <gabriel@fouasnon.com>
- Loading branch information
3 people
committed
Feb 16, 2024
1 parent
51d6956
commit 1a98dea
Showing
11 changed files
with
321 additions
and
95 deletions.
There are no files selected for viewing
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
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| // Copyright (c) Jupyter Development Team. | ||
| // Distributed under the terms of the Modified BSD License. | ||
|
|
||
| import { DOMUtils } from '@jupyterlab/apputils'; | ||
|
|
||
| describe('@jupyterlab/apputils', () => { | ||
| describe('DOMUtils', () => { | ||
| describe('hasActiveEditableElement', () => { | ||
| const testCases = [ | ||
| // editable elements | ||
| ['.input', true], | ||
| ['.textarea', true], | ||
| ['.div-editable', true], | ||
| // non-editable elements | ||
| ['.input-readonly', false], | ||
| ['.textarea-readonly', false], | ||
| ['.div', false] | ||
| ]; | ||
|
|
||
| const div = document.createElement('div'); | ||
| div.innerHTML = ` | ||
| <div class="light-host"> | ||
| <input class="input" /> | ||
| <input class="input-readonly" readonly /> | ||
| <textarea class="textarea"></textarea> | ||
| <textarea class="textarea-readonly" readonly></textarea> | ||
| <div class="div" tabindex="1"></div> | ||
| <div class="div-editable" contenteditable="true" tabindex="1"></div> | ||
| </div> | ||
| <div class="shadow-host"> | ||
| </div> | ||
| `; | ||
| document.body.appendChild(div); | ||
|
|
||
| const lightHost = div.querySelector('.light-host')!; | ||
| const shadowHost = div.querySelector('.shadow-host')!; | ||
| const shadowRoot = shadowHost.attachShadow({ mode: 'open' }); | ||
| // mirror test cases from light DOM in the shadow DOM | ||
| shadowRoot.innerHTML = lightHost.innerHTML; | ||
|
|
||
| it.each(testCases)( | ||
| 'should work in light DOM: `%s` element should result in `%s`', | ||
| (selector, expected) => { | ||
| const element = lightHost.querySelector( | ||
| selector as string | ||
| ) as HTMLElement; | ||
| element.focus(); | ||
|
|
||
| const result = DOMUtils.hasActiveEditableElement(div); | ||
| expect(result).toBe(expected); | ||
| } | ||
| ); | ||
|
|
||
| it.each(testCases)( | ||
| 'should work in shadow DOM: `%s` element should result in `%s`', | ||
| (selector, expected) => { | ||
| const element = shadowRoot.querySelector( | ||
| selector as string | ||
| ) as HTMLElement; | ||
| element.focus(); | ||
|
|
||
| const result = DOMUtils.hasActiveEditableElement(div); | ||
| expect(result).toBe(expected); | ||
| } | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.