From c36e98cd3961c7edee00796e7a37f4806ebb0d51 Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Fri, 22 Sep 2023 15:29:32 +0800 Subject: [PATCH] fix rename click outside (#5656) --- frontend/src/components/rename.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/rename.js b/frontend/src/components/rename.js index 35af23a44e..4c60ca3b83 100644 --- a/frontend/src/components/rename.js +++ b/frontend/src/components/rename.js @@ -29,8 +29,22 @@ class Rename extends React.Component { } else { this.inputRef.current.setSelectionRange(0, -1); } + // ensure real dom has been rendered, then listen the click event + setTimeout(() => { + document.addEventListener('click', this.onClick); + }, 1); } + componentWillUnmount() { + document.removeEventListener('click', this.onClick); + } + + onClick = (e) => { + if (!this.inputRef.current.contains(e.target)) { + this.onRenameConfirm(); + } + }; + onChange = (e) => { this.setState({name: e.target.value}); }; @@ -45,7 +59,7 @@ class Rename extends React.Component { }; onRenameConfirm = (e) => { - e.nativeEvent.stopImmediatePropagation(); + e && e.nativeEvent.stopImmediatePropagation(); let newName = this.state.name.trim(); if (newName === this.props.name) { this.props.onRenameCancel(); @@ -55,6 +69,7 @@ class Rename extends React.Component { let { isValid, errMessage } = this.validateInput(); if (!isValid) { toaster.danger(errMessage); + this.props.onRenameCancel(); } else { this.props.onRenameConfirm(newName); }