mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-09 05:26:24 +09:00
(fix): Re-focus the tree-node after completion of editing the name (#1945)
## Description 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. Use keyboard to navigate between the tree elements. 2. Click `Ctrl + E` to enter into edit mode. 3. Edit the name of the tree-node and then press `Enter`. 4. Use the up/down arrows to navigate to other nodes in the tree. ## Code Review - [ ] hi, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [x] made a self-review - [x] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [x] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/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
This commit is contained in:
1 parent
85ac541bde
commit
ea14cb2bd0
2 files changed
+8
-4
No files matched your search
@@ -88,7 +88,7 @@ export const InstanceTree = (
|
||||
const isEditing = props.itemData.id === editingItemId;
|
||||
|
||||
return (
|
||||
<TreeItemBody {...props} selectionEvent="focus" isEditing={isEditing}>
|
||||
<TreeItemBody {...props} selectionEvent="focus">
|
||||
<TreeItem
|
||||
isEditable={true}
|
||||
isEditing={isEditing}
|
||||
@@ -146,7 +146,13 @@ const TreeItem = ({
|
||||
const { ref, handlers } = useContentEditable({
|
||||
isEditable,
|
||||
isEditing,
|
||||
onChangeValue,
|
||||
onChangeValue: (value: string) => {
|
||||
onChangeValue(value);
|
||||
const button = ref.current?.closest(
|
||||
"[data-item-button-id]"
|
||||
) as HTMLElement;
|
||||
button?.focus();
|
||||
},
|
||||
onChangeEditing,
|
||||
});
|
||||
|
||||
|
||||
@@ -263,14 +263,12 @@ export const TreeItemBody = <Data extends { id: string }>({
|
||||
forceFocus = false,
|
||||
selectionEvent = "click",
|
||||
onToggle,
|
||||
isEditing = false,
|
||||
}: TreeItemRenderProps<Data> & {
|
||||
children: React.ReactNode;
|
||||
suffix?: React.ReactNode;
|
||||
suffixWidth?: string;
|
||||
alwaysShowSuffix?: boolean;
|
||||
forceFocus?: boolean;
|
||||
isEditing?: boolean;
|
||||
selectionEvent?: "click" | "focus";
|
||||
}) => {
|
||||
const [focusTarget, setFocusTarget] = useState<
|
||||
|
||||
Reference in new issue
Block a user