diff --git a/client/src/components/Label/Label.jsx b/client/src/components/Label/Label.jsx
index 2fffba21..3de98477 100644
--- a/client/src/components/Label/Label.jsx
+++ b/client/src/components/Label/Label.jsx
@@ -48,7 +48,7 @@ const Label = React.memo(({
className={classNames(styles.wrapper, onClick && styles.hoverable)}
style={style}
>
- {name}
+ {name || '\u00A0'}
);
@@ -62,14 +62,15 @@ const Label = React.memo(({
});
Label.propTypes = {
- name: PropTypes.string.isRequired,
- color: PropTypes.oneOf(LabelColors.KEYS).isRequired, // TODO: without color
+ name: PropTypes.string,
+ color: PropTypes.oneOf(LabelColors.KEYS).isRequired,
size: PropTypes.oneOf(Object.values(SIZES)),
isDisabled: PropTypes.bool,
onClick: PropTypes.func,
};
Label.defaultProps = {
+ name: undefined,
size: SIZES.MEDIUM,
isDisabled: false,
onClick: undefined,
diff --git a/client/src/components/LabelsStep/AddStep.jsx b/client/src/components/LabelsStep/AddStep.jsx
index 8e2c26d1..c98ba7e0 100755
--- a/client/src/components/LabelsStep/AddStep.jsx
+++ b/client/src/components/LabelsStep/AddStep.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Form } from 'semantic-ui-react';
@@ -18,19 +18,12 @@ const AddStep = React.memo(({ onCreate, onBack }) => {
color: LabelColors.KEYS[0],
}));
- const editor = useRef(null);
-
const handleSubmit = useDeepCompareCallback(() => {
const cleanData = {
...data,
- name: data.name.trim(),
+ name: data.name.trim() || null,
};
- if (!cleanData.name) {
- editor.current.selectNameField();
- return;
- }
-
onCreate(cleanData);
onBack();
}, [data, onCreate, onBack]);
@@ -44,7 +37,7 @@ const AddStep = React.memo(({ onCreate, onBack }) => {
diff --git a/client/src/components/LabelsStep/EditStep.jsx b/client/src/components/LabelsStep/EditStep.jsx
index 7dce7fe3..b288672f 100755
--- a/client/src/components/LabelsStep/EditStep.jsx
+++ b/client/src/components/LabelsStep/EditStep.jsx
@@ -1,5 +1,5 @@
import dequal from 'dequal';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Form } from 'semantic-ui-react';
@@ -22,26 +22,19 @@ const EditStep = React.memo(({
const [t] = useTranslation();
const [data, handleFieldChange] = useForm(() => ({
- name: '',
color: LabelColors.KEYS[0],
...defaultData,
+ name: defaultData.name || '',
}));
const [step, openStep, handleBack] = useSteps();
- const editor = useRef(null);
-
const handleSubmit = useDeepCompareCallback(() => {
const cleanData = {
...data,
- name: data.name.trim(),
+ name: data.name.trim() || null,
};
- if (!cleanData.name) {
- editor.current.selectNameField();
- return;
- }
-
if (!dequal(cleanData, defaultData)) {
onUpdate(cleanData);
}
@@ -76,7 +69,7 @@ const EditStep = React.memo(({