Skip to content

Commit e8aa35e

Browse files
committed
added state to the name input
1 parent eb8c4b3 commit e8aa35e

File tree

1 file changed

+6
-3
lines changed

1 file changed

+6
-3
lines changed

client/modules/IDE/components/Header/Toolbar.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef } from 'react';
1+
import React, { useRef, useState } from 'react';
22
import classNames from 'classnames';
33
import PropTypes from 'prop-types';
44
import { useTranslation } from 'react-i18next';
@@ -38,6 +38,7 @@ const Toolbar = (props) => {
3838
const { changeSketchName, canEditProjectName } = useSketchActions();
3939

4040
const projectNameInputRef = useRef();
41+
const [nameInputValue, setNameInputValue] = useState(project.name);
4142

4243
function handleKeyPress(event) {
4344
if (event.key === 'Enter') {
@@ -56,7 +57,7 @@ const Toolbar = (props) => {
5657
}
5758

5859
function handleProjectNameSave() {
59-
const newName = projectNameInputRef.current?.value;
60+
const newName = nameInputValue;
6061
if (newName.length > 0) {
6162
dispatch(hideEditProjectName());
6263
changeSketchName(newName);
@@ -151,9 +152,11 @@ const Toolbar = (props) => {
151152
maxLength="128"
152153
className="toolbar__project-name-input"
153154
aria-label={t('Toolbar.NewSketchNameARIA')}
155+
disabled={!canEditProjectName}
154156
ref={projectNameInputRef}
157+
value={nameInputValue}
158+
onChange={(e) => setNameInputValue(e.target.value)}
155159
onBlur={handleProjectNameSave}
156-
onFocus={(event) => (event.target.value = project.name)}
157160
onKeyPress={handleKeyPress}
158161
/>
159162
{(() => {

0 commit comments

Comments
 (0)