From d1a2294a77faf0fe655553245428e68f6057ffac Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Fri, 24 Jun 2022 16:19:22 +0300
Subject: [PATCH] Fix editable text issues (#23532)
---
.../core/components/EditableText/EditableText.tsx | 11 ++++++++---
.../query_builder/components/view/ViewHeader.jsx | 7 ++-----
.../components/view/sidebars/QuestionInfoSidebar.tsx | 1 +
3 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/frontend/src/metabase/core/components/EditableText/EditableText.tsx b/frontend/src/metabase/core/components/EditableText/EditableText.tsx
index 4e50c84462d..8193edfd85f 100644
--- a/frontend/src/metabase/core/components/EditableText/EditableText.tsx
+++ b/frontend/src/metabase/core/components/EditableText/EditableText.tsx
@@ -17,6 +17,7 @@ export type EditableTextAttributes = Omit<
export interface EditableTextProps extends EditableTextAttributes {
initialValue?: string | null;
placeholder?: string;
+ isOptional?: boolean;
isMultiline?: boolean;
onChange?: (value: string) => void;
"data-testid"?: string;
@@ -26,6 +27,7 @@ const EditableText = forwardRef(function EditableText(
{
initialValue,
placeholder,
+ isOptional = false,
isMultiline = false,
onChange,
"data-testid": dataTestId,
@@ -35,13 +37,16 @@ const EditableText = forwardRef(function EditableText(
) {
const [inputValue, setInputValue] = useState(initialValue ?? "");
const [submitValue, setSubmitValue] = useState(initialValue ?? "");
+ const displayValue = inputValue ? inputValue : placeholder;
const handleBlur = useCallback(() => {
- if (inputValue !== submitValue) {
+ if (!isOptional && !inputValue) {
+ setInputValue(submitValue);
+ } else if (inputValue !== submitValue) {
setSubmitValue(inputValue);
onChange?.(inputValue);
}
- }, [inputValue, submitValue, onChange]);
+ }, [inputValue, submitValue, isOptional, onChange]);
const handleChange = useCallback(
(event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -63,7 +68,7 @@ const EditableText = forwardRef(function EditableText(
);
return (
- <EditableTextRoot {...props} ref={ref} data-value={`${inputValue}\u00A0`}>
+ <EditableTextRoot {...props} ref={ref} data-value={`${displayValue}\u00A0`}>
<EditableTextArea
value={inputValue}
placeholder={placeholder}
diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
index de09c06a770..f6e3032836f 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
@@ -192,11 +192,8 @@ function SavedQuestionLeftSide(props) {
const onHeaderChange = useCallback(
name => {
- if (name !== question.displayName()) {
- onSave({
- ...question.card(),
- name,
- });
+ if (name && name !== question.displayName()) {
+ onSave(question.setDisplayName(name).card());
}
},
[question, onSave],
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx
index dca8218cf43..ccbb0f38046 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx
@@ -51,6 +51,7 @@ export const QuestionInfoSidebar = ({
<EditableText
initialValue={description}
placeholder={t`Description`}
+ isOptional
isMultiline
onChange={handleSave}
/>
--
GitLab