diff --git a/src/core/target_observer.ts b/src/core/target_observer.ts index e59dbb43..60c3e8ec 100644 --- a/src/core/target_observer.ts +++ b/src/core/target_observer.ts @@ -73,7 +73,7 @@ export class TargetObserver implements TokenListObserverDelegate { // Private private get attributeName() { - return `data-${this.context.identifier}-target` + return this.context.schema.targetAttributeForScope(this.context.identifier) } private get element() { diff --git a/src/tests/modules/core/target_tests.ts b/src/tests/modules/core/target_tests.ts index 3d26c94e..a4d03e46 100644 --- a/src/tests/modules/core/target_tests.ts +++ b/src/tests/modules/core/target_tests.ts @@ -1,18 +1,27 @@ import { ControllerTestCase } from "../../cases/controller_test_case" import { TargetController } from "../../controllers/target_controller" +import { Schema, defaultSchema } from "../../../core/schema" export default class TargetTests extends ControllerTestCase(TargetController) { + override schema: Schema = { + ...defaultSchema, + + // Override target attribute to verify that it is used correctly + // https://github.com/hotwired/stimulus/issues/809 + targetAttributeForScope: (identifier) => `data-${identifier}-test-target`, + } + fixtureHTML = `
-
-
-
-
+
+
+
+
-
+
- +
` @@ -54,7 +63,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { } "test singular linked target property throws an error when no target is found"() { - this.findElement("#beta1").removeAttribute(`data-${this.identifier}-target`) + this.findElement("#beta1").removeAttribute(`data-${this.identifier}-test-target`) this.assert.equal(this.controller.hasBetaTarget, false) this.assert.equal(this.controller.betaTargets.length, 0) this.assert.throws(() => this.controller.betaTarget) @@ -69,7 +78,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { async "test target connected callback when element is inserted"() { const connectedInput = document.createElement("input") - connectedInput.setAttribute(`data-${this.controller.identifier}-target`, "input") + connectedInput.setAttribute(`data-${this.controller.identifier}-test-target`, "input") this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1) @@ -89,7 +98,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1) - element.setAttribute(`data-${this.controller.identifier}-target`, "input") + element.setAttribute(`data-${this.controller.identifier}-test-target`, "input") await this.nextFrame this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2) @@ -102,7 +111,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1) - element.setAttribute(`data-${this.controller.identifier}-target`, "alpha input") + element.setAttribute(`data-${this.controller.identifier}-test-target`, "alpha input") await this.nextFrame this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2) @@ -156,7 +165,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { `expected "${element.className}" not to contain "disconnected"` ) - element.removeAttribute(`data-${this.controller.identifier}-target`) + element.removeAttribute(`data-${this.controller.identifier}-test-target`) await this.nextFrame this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 1) @@ -177,7 +186,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { `expected "${element.className}" not to contain "disconnected"` ) - element.setAttribute(`data-${this.controller.identifier}-target`, "input") + element.setAttribute(`data-${this.controller.identifier}-test-target`, "input") await this.nextFrame this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 2) @@ -193,7 +202,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) { this.controller.element.insertAdjacentHTML( "beforeend", ` -
+
` ) await this.nextFrame