Skip to content

Commit 4753c2a

Browse files
authoredSep 8, 2023
Fix shared link name is not editable (#2279)
## Description Shared link name is not editable because every input change closes popover with the input. Here is the fix and the explanation. This is already fixed in rc radix versions and will be in the next stable release https://github.com/radix-ui/primitives/blob/28bebf2c6992d056244845c898abeff45dec2871/packages/react/focus-scope/src/FocusScope.tsx#L115 Without this PR the issue looks: Editing input <img width="353" alt="image" src="https://github.com/webstudio-is/webstudio/assets/5077042/b6ba547c-4286-45f2-b351-9122780cb482"> cause this button <img width="216" alt="image" src="https://github.com/webstudio-is/webstudio/assets/5077042/4d6a26c3-3336-4995-b0b4-c38200e34e07"> to switch onto `pending` state <img width="211" alt="image" src="https://github.com/webstudio-is/webstudio/assets/5077042/f214d9a9-3454-4b1b-8603-48224fa370d1"> what cause handleMutations to move focus onto parent popover Child popover lost focus and closes. ## Steps for reproduction Click Share, Edit link name, see it works ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
1 parent 9724458 commit 4753c2a

File tree

3 files changed

+35
-6
lines changed

3 files changed

+35
-6
lines changed
 

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@
6464
"patchedDependencies": {
6565
"@stitches/react@1.3.1-1": "patches/@stitches__react@1.3.1-1.patch",
6666
"css-tree@2.3.1": "patches/css-tree@2.3.1.patch",
67-
"@types/css-tree@2.3.1": "patches/@types__css-tree@2.3.1.patch"
67+
"@types/css-tree@2.3.1": "patches/@types__css-tree@2.3.1.patch",
68+
"@radix-ui/react-focus-scope@1.0.3": "patches/@radix-ui__react-focus-scope@1.0.3.patch"
6869
}
6970
}
7071
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
diff --git a/dist/index.js b/dist/index.js
2+
index 0a98b8ec8f2a6d1160d035174c8979a4d0445863..6793b5290ece1c13cfb2af565899d9da810f9ede 100644
3+
--- a/dist/index.js
4+
+++ b/dist/index.js
5+
@@ -76,6 +76,7 @@ const $2bc01e66e04aa9ed$export$20e40289641fbbb6 = /*#__PURE__*/ $buum9$react.for
6+
// to keep focus trapped correctly.
7+
function handleMutations(mutations) {
8+
const focusedElement = document.activeElement;
9+
+ if (focusedElement !== document.body) return;
10+
for (const mutation of mutations){
11+
if (mutation.removedNodes.length > 0) {
12+
if (!(container1 !== null && container1 !== void 0 && container1.contains(focusedElement))) $2bc01e66e04aa9ed$var$focus(container1);
13+
diff --git a/dist/index.mjs b/dist/index.mjs
14+
index 4a8b11cc2eb38b397590f20f819b6599e4d78e7d..f30c37a232e93be17e4247ada404d5160a916cc3 100644
15+
--- a/dist/index.mjs
16+
+++ b/dist/index.mjs
17+
@@ -67,6 +67,7 @@ const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ $45QHv$forwardRe
18+
// to keep focus trapped correctly.
19+
function handleMutations(mutations) {
20+
const focusedElement = document.activeElement;
21+
+ if (focusedElement !== document.body) return;
22+
for (const mutation of mutations){
23+
if (mutation.removedNodes.length > 0) {
24+
if (!(container1 !== null && container1 !== void 0 && container1.contains(focusedElement))) $d3863c46a17e8a28$var$focus(container1);

‎pnpm-lock.yaml

+9-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)