Custom Components - Display a custom component's title as a question …

…title fix #7307 (#7312)

src/localizablestring.ts

@@ -46,7 +46,6 @@ export class LocalizableString implements ILocalizableString {
     }
   }
   public onGetTextCallback: (str: string) => string;
-  public onGetDefaultTextCallback: () => string;
   public storeDefaultText: boolean;
   public onGetLocalizationTextCallback: (str: string) => string;
   public onStrChanged: (oldValue: string, newValue: string) => void;
@@ -173,9 +172,6 @@ export class LocalizableString implements ILocalizableString {
   }
   private isLocaleTextEqualsWithDefault(loc: string, val: string): boolean {
     let res = this.getLocaleTextCore(loc);
-    if (!res && this.onGetDefaultTextCallback) {
-      res = this.onGetDefaultTextCallback();
-    }
     if (res === val) return true;
     return this.isValueEmpty(res) && this.isValueEmpty(val);
   }

src/question.ts

@@ -136,10 +136,6 @@ export class Question extends SurveyElement<Question>
     this.addExpressionProperty("requiredIf", (obj: Base, res: any) => { this.isRequired = res === true; });
 
     this.createLocalizableString("commentText", this, true, "otherItemText");
-    this.locTitle.onGetDefaultTextCallback = (): string => {
-      return this.name;
-    };
-    this.locTitle.storeDefaultText = true;
     this.createLocalizableString("requiredErrorText", this);
     this.addTriggerInfo("resetValueIf", (): boolean => !this.isEmpty(), (): void => {
       this.clearValue();
@@ -178,11 +174,13 @@ export class Question extends SurveyElement<Question>
     });
     this.registerPropertyChangedHandlers(["isMobile"], () => { this.onMobileChanged(); });
   }
+  protected getDefaultTitle(): string { return this.name; }
   protected createLocTitleProperty(): LocalizableString {
     const locTitleValue = super.createLocTitleProperty();
+    locTitleValue.storeDefaultText = true;
     locTitleValue.onGetTextCallback = (text: string): string => {
       if (!text) {
-        text = this.name;
+        text = this.getDefaultTitle();
       }
       if (!this.survey) return text;
       return this.survey.getUpdatedQuestionTitle(this, text);

src/question_custom.ts

@@ -624,6 +624,7 @@ export abstract class QuestionCustomModelBase extends Question
 
 export class QuestionCustomModel extends QuestionCustomModelBase {
   private questionWrapper: Question;
+  private hasJSONTitle: boolean;
   public getTemplate(): string {
     return "custom";
   }
@@ -642,6 +643,10 @@ export class QuestionCustomModel extends QuestionCustomModelBase {
   protected getQuestionByName(name: string): IQuestion {
     return this.contentQuestion;
   }
+  protected getDefaultTitle(): string {
+    if(this.hasJSONTitle && this.contentQuestion) return this.contentQuestion.title;
+    return super.getDefaultTitle();
+  }
   setValue(name: string, newValue: any, locNotification: any, allowNotifyValueChanged?: boolean): any {
     if(this.isValueChanging(name, newValue)) return;
     super.setValue(name, newValue, locNotification, allowNotifyValueChanged);
@@ -665,7 +670,7 @@ export class QuestionCustomModel extends QuestionCustomModelBase {
     this.updateElementCss();
     return res;
   }
-  public focus(onError: boolean = false) {
+  public focus(onError: boolean = false): void {
     if (!!this.contentQuestion) {
       this.contentQuestion.focus(onError);
     } else {
@@ -685,7 +690,8 @@ export class QuestionCustomModel extends QuestionCustomModelBase {
     var json = this.customQuestion.json;
     var res: any = null;
     if (!!json.questionJSON) {
-      var qType = json.questionJSON.type;
+      this.hasJSONTitle = !!json.questionJSON.title;
+      let qType = json.questionJSON.type;
       if (!qType || !Serializer.findClass(qType))
         throw "type attribute in questionJSON is empty or incorrect";
       res = <Question>Serializer.createClass(qType);

src/questionfactory.ts

@@ -79,6 +79,6 @@ export class ElementFactory {
   public createElement(elementType: string, name: string): IElement {
     var creator = this.creatorHash[elementType];
     if (!!creator) return creator(name);
-    return null;
+    return Serializer.createClass(elementType, { name: name });
   }
 }

tests/question_customtests.ts

@@ -2508,3 +2508,23 @@ QUnit.test("internal boolean flag", function (assert) {
   assert.notOk(ComponentCollection.Instance.getCustomQuestionByName("newquestion1"), "newquestion1 is not here, #2");
   assert.notOk(ComponentCollection.Instance.getCustomQuestionByName("newquestion2"), "newquestion2 is not here, #2");
 });
+QUnit.test("Set title from single component into question", function (assert) {
+  ComponentCollection.Instance.add({
+    name: "newquestion",
+    questionJSON: { type: "text", title: "Title from Component" },
+  });
+  const survey = new SurveyModel({
+    elements: [
+      { type: "newquestion", name: "q1" },
+      { type: "newquestion", name: "q2", title: "Q2 title" }
+    ]
+  });
+  const q1 = survey.getQuestionByName("q1");
+  const q2 = survey.getQuestionByName("q2");
+  const q3 = survey.pages[0].addNewQuestion("newquestion", "q3");
+  assert.equal(q1.locTitle.renderedHtml, "Title from Component", "q1 title");
+  assert.equal(q2.locTitle.renderedHtml, "Q2 title", "q2 title");
+  assert.equal(q3.name, "q3", "q3 name");
+  assert.equal(q3.locTitle.renderedHtml, "Title from Component", "q3 title");
+  assert.deepEqual(q1.toJSON(), { name: "q1" }, "Do not serialize title");
+});