Knockout: fix link inside description is not clickable (#7275)

* Knockout: fix link inside description is not clickable * Fix angular test
surveyjs · Nov 1, 2023 · c47438f · c47438f
1 parent 8a8fd4f
commit c47438f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 7 deletions.
diff --git a/packages/survey-angular-ui/example/src/app/app.module.ts b/packages/survey-angular-ui/example/src/app/app.module.ts
@@ -14,13 +14,14 @@ import { TestModernComponent } from "./components/test/testmodern.component";
 import { TestBootstrapComponent } from "./components/test/bootstrap.component";
 import { TestCustomWidgetComponent } from "./components/test/customwidget.component";
 import { CustomActionComponent } from "./components/test-custom-components/action-custom.component";
+import { EmptyComponent } from "./components/test/empty.component";
 
 @NgModule({
   declarations: [
     AppComponent, ExampleComponent, TestComponent, TestDefaultComponent, TestDefaultV2Component, TestModernComponent, TestBootstrapComponent,
     TestCustomWidgetComponent,
     AngularItemTemplateComponent,
-    CustomActionComponent
+    CustomActionComponent, EmptyComponent
   ],
   imports: [
     BrowserModule, SurveyModule, FormsModule, AppRoutingModule

diff --git a/packages/survey-angular-ui/example/src/app/components/test/empty.component.ts b/packages/survey-angular-ui/example/src/app/components/test/empty.component.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectorRef, Component } from "@angular/core";
+
+@Component({
+  selector: "empty",
+  template: "<div></div>",
+})
+export class EmptyComponent {
+}
diff --git a/packages/survey-angular-ui/example/src/app/router.module.ts b/packages/survey-angular-ui/example/src/app/router.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from "@angular/core";
-import { RouterModule } from '@angular/router';
+import { RouterModule } from "@angular/router";
 import { TestBootstrapComponent } from "./components/test/bootstrap.component";
 import { TestCustomWidgetComponent } from "./components/test//customwidget.component";
 import { TestDefaultComponent } from "./components/test//testdefault.component";
 import { TestDefaultV2Component } from "./components/test/testdefaultV2.component";
 import { TestModernComponent } from "./components/test/testmodern.component";
+import { EmptyComponent } from "./components/test/empty.component";
 
 const routes = [
   { path: "examples_test/default/angular", component: TestDefaultComponent },
@@ -16,11 +17,12 @@ const routes = [
   { path: "examples_test/bootstrap/angular", component: TestBootstrapComponent },
   { path: "examples_test/bootstrap/angular.html", component: TestBootstrapComponent },
   { path: "examples_test/customWidget/angular", component: TestCustomWidgetComponent },
-  { path: "examples_test/customWidget/angular.html", component: TestCustomWidgetComponent }
-]
+  { path: "examples_test/customWidget/angular.html", component: TestCustomWidgetComponent },
+  { path: "test", component: EmptyComponent }
+];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})],
+  imports: [RouterModule.forRoot(routes, { anchorScrolling: "enabled" })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/src/knockout/templates/questiontitle.html b/src/knockout/templates/questiontitle.html
@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question-title">
-  <div data-bind="css: question.cssHeader, click: function(m, e) { question.clickTitleFunction && question.clickTitleFunction(e); }">
+  <div data-bind="css: question.cssHeader, click: function(m, e) { if(question.clickTitleFunction) return question.clickTitleFunction(e); }">
     <!-- ko component: { name: 'survey-element-title', params: { element: $data } } --><!-- /ko -->
     <!-- ko if: $data.hasDescriptionUnderTitle -->
     <div data-bind="css: $data.cssDescription, visible: $data.hasDescription">

diff --git a/testCafe/survey/textMarkdown.ts b/testCafe/survey/textMarkdown.ts
@@ -1,5 +1,5 @@
 import { frameworks, url, initSurvey, getSurveyResult } from "../helper";
-import { Selector } from "testcafe";
+import { ClientFunction, Selector } from "testcafe";
 const title = "Test survey width";
 
 const json = {
@@ -59,4 +59,30 @@ frameworks.forEach((framework) => {
     const surveyResult = await getSurveyResult();
     await t.expect(surveyResult.question2).eql(2);
   });
+});
+
+const json2 = {
+  elements: [
+    {
+      type: "text",
+      title: "Title",
+      name: "q1",
+      description: "<a class='test-link' href='/test'>Click</a>"
+    }
+  ]
+};
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
+    async (t) => {
+      await initSurvey(framework, json2, { "onTextMarkdown": (sender, options) => {
+        options.html = options.text;
+      } });
+    }
+  );
+  test("Check link inside description is clickable", async (t) => {
+    await t
+      .click(Selector(".test-link"))
+      .expect(ClientFunction(() => window.location.pathname)()).eql("/test");
+  });
 });