Skip to content

Commit a2a030f

Browse files
authored
Make Action Parameters attributes case-insensitive (#571)
Even though this is not the "recommended way" to specify the data attributes for the params it's to match the existing behaviour of Actions, Controllers, Targets and Values. Resolves #561
1 parent f3e1c03 commit a2a030f

File tree

3 files changed

+67
-5
lines changed

3 files changed

+67
-5
lines changed

src/core/action.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export class Action {
3131

3232
get params() {
3333
const params:{ [key: string]: any } = {}
34-
const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`)
34+
const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`, "i")
3535

3636
for (const { name, value } of Array.from(this.element.attributes)) {
3737
const match = name.match(pattern)
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import ActionParamsTests from "./action_params_tests"
2+
3+
export default class ActionParamsCaseInsensitiveTests extends ActionParamsTests {
4+
identifier = ["CamelCase", "AnotherOne"]
5+
fixtureHTML = `
6+
<div data-controller="CamelCase AnotherOne">
7+
<button data-CamelCase-id-param="123"
8+
data-CamelCase-multi-word-example-param="/path"
9+
data-CamelCase-active-param="true"
10+
data-CamelCase-inactive-param="false"
11+
data-CamelCase-empty-param=""
12+
data-CamelCase-payload-param='${JSON.stringify({value: 1})}'
13+
data-CamelCase-param-something="not-reported"
14+
data-Something-param="not-reported"
15+
data-AnotherOne-id-param="234">
16+
<div id="nested"></div>
17+
</button>
18+
</div>
19+
<div id="outside"></div>
20+
`
21+
expectedParamsForCamelCase = {
22+
id: 123,
23+
multiWordExample: "/path",
24+
payload: {
25+
value: 1
26+
},
27+
active: true,
28+
empty: "",
29+
inactive: false
30+
}
31+
32+
async "test clicking on the element does return its params"() {
33+
this.actionValue = "click->CamelCase#log"
34+
await this.nextFrame
35+
await this.triggerEvent(this.buttonElement, "click")
36+
37+
this.assertActions(
38+
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
39+
)
40+
}
41+
42+
async "test global event return element params where the action is defined"() {
43+
this.actionValue = "keydown@window->CamelCase#log"
44+
await this.nextFrame
45+
await this.triggerEvent("#outside", "keydown")
46+
47+
this.assertActions(
48+
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
49+
)
50+
}
51+
52+
async "test passing params to namespaced controller"() {
53+
this.actionValue = "click->CamelCase#log click->AnotherOne#log2"
54+
await this.nextFrame
55+
await this.triggerEvent(this.buttonElement, "click")
56+
57+
this.assertActions(
58+
{ identifier: "CamelCase", params: this.expectedParamsForCamelCase },
59+
{ identifier: "AnotherOne", params: { id: 234 } },
60+
)
61+
}
62+
}

src/tests/modules/core/action_params_tests.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ export default class ActionParamsTests extends LogControllerTestCase {
6969
{ identifier: "c", params: this.expectedParamsForC },
7070
)
7171

72-
await this.buttonElement.setAttribute("data-c-id-param", "234")
73-
await this.buttonElement.setAttribute("data-c-new-param", "new")
74-
await this.buttonElement.removeAttribute("data-c-payload-param")
75-
await this.triggerEvent(this.buttonElement, "click")
72+
this.buttonElement.setAttribute("data-c-id-param", "234")
73+
this.buttonElement.setAttribute("data-c-new-param", "new")
74+
this.buttonElement.removeAttribute("data-c-payload-param")
75+
this.triggerEvent(this.buttonElement, "click")
7676

7777
this.assertActions(
7878
{ identifier: "c", params: this.expectedParamsForC },

0 commit comments

Comments
 (0)