1
- import React , { useRef } from 'react' ;
1
+ import React , { useRef , useState } from 'react' ;
2
2
import classNames from 'classnames' ;
3
3
import PropTypes from 'prop-types' ;
4
4
import { useTranslation } from 'react-i18next' ;
@@ -38,6 +38,7 @@ const Toolbar = (props) => {
38
38
const { changeSketchName, canEditProjectName } = useSketchActions ( ) ;
39
39
40
40
const projectNameInputRef = useRef ( ) ;
41
+ const [ nameInputValue , setNameInputValue ] = useState ( project . name ) ;
41
42
42
43
function handleKeyPress ( event ) {
43
44
if ( event . key === 'Enter' ) {
@@ -56,7 +57,7 @@ const Toolbar = (props) => {
56
57
}
57
58
58
59
function handleProjectNameSave ( ) {
59
- const newName = projectNameInputRef . current ?. value ;
60
+ const newName = nameInputValue ;
60
61
if ( newName . length > 0 ) {
61
62
dispatch ( hideEditProjectName ( ) ) ;
62
63
changeSketchName ( newName ) ;
@@ -151,9 +152,11 @@ const Toolbar = (props) => {
151
152
maxLength = "128"
152
153
className = "toolbar__project-name-input"
153
154
aria-label = { t ( 'Toolbar.NewSketchNameARIA' ) }
155
+ disabled = { ! canEditProjectName }
154
156
ref = { projectNameInputRef }
157
+ value = { nameInputValue }
158
+ onChange = { ( e ) => setNameInputValue ( e . target . value ) }
155
159
onBlur = { handleProjectNameSave }
156
- onFocus = { ( event ) => ( event . target . value = project . name ) }
157
160
onKeyPress = { handleKeyPress }
158
161
/>
159
162
{ ( ( ) => {
0 commit comments