Bug report: Dragging not possible after editing a node without hovering in Firefox
jannnik opened this issue · comments
Report
Current behavior
unlock after editing only works when the input gets unhovered or unfocused while saving (in Firefox).
The useDragControl controls a lock which should be relased after editing. The unlock is trigged by handleMouseOut and handleFocusOut.
When working only with the keyboard as in the sandbox, mouseout does not work. focusout seems to be trigged in Chrome when the input gets unmounted from dom, but not in Firefox. Therefore we cannot unlock the tree in Firefox without using the mouse or simulating an onblur event before removing the input.
Expected behavior
unlock should also work when the input element is unmounted, independent from mouse position or focus state.
How to reproduce
https://codesandbox.io/s/editable-ts-forked-zg5md?file=/src/App.tsx
- Open Firefox
- Click the edit button
- Do NOT hover the input
- Press enter to save the node
- Dragging is not possible
@jannnik Thank you for your report!
The reason seems to be that the input blur event does not fire when input is unmounted with Enter without removing focus from the input element.
From the Treeview library side, It doesn't know the structure of the node (CustomNode), so it is listening focusout where bubbling is enabled instead, but I think it's probably related to the above blur behavior and the differences in implementation for each browser in that area.
I have tried to find a way to solve this problem on the library side, but I am not sure if it is possible yet.
However, for this case, I think we can avoid the problem by doing the following to remove the focus when the Enter key is pressed.
<TextField
className={`${styles.textField}
${styles.nodeInput}}
value={labelText}
onChange={handleChangeText}
onKeyDown={(e) => {
if (e.keyCode === 13) {
(document.activeElement as HTMLElement).blur(); // or `e.target.blur();`
handleSubmit();
}
}}
autoFocus
/>
Here is a sample.
https://codesandbox.io/s/issue65-07zsg?file=/src/CustomNode.tsx
Thanks, this workaround works for our implementation. Unfortunately, I also have no idea how to solve this in the library in an elegant way.
@jannnik I published new version that solves this problem on the library side as v1.5.6.
It uses MutationObserver to detect unmounting of the focused element and unlock it if the focus is initially set to the body element after unmounting.
I think you've already solved the problem with another workaround,
but in the new version, I think it will work as expected without the need to focus out with e.target.blur().
This sample is below.
https://codesandbox.io/s/issue65-07zsg?file=/src/CustomNode.tsx.