Fix <select> elements with expression children (#371)

natemoo-re · web-flow · commit c048567fff25 · 2022-04-21T14:56:46.000-05:00
* fix(#366): return to inBodyIM after expression inside inSelectIM * chore: add changeset
diff --git a/.changeset/nice-bulldogs-unite.md b/.changeset/nice-bulldogs-unite.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fix edge case with `select` elements and expression children
diff --git a/internal/parser.go b/internal/parser.go
@@ -2205,7 +2205,7 @@ func inSelectIM(p *parser) bool {
 	case StartExpressionToken:
 		p.addExpression()
 		p.afe = append(p.afe, &scopeMarker)
-		p.setOriginalIM()
+		p.originalIM = inBodyIM
 		p.im = inExpressionIM
 		return true
 	case EndExpressionToken:
diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -1623,6 +1623,13 @@ const items = ["Dog", "Cat", "Platipus"];
 				code: `<html>${$$renderComponent($$result,'Component',Component,{},{"default": () => $$render` + BACKTICK + `<form><textarea></textarea></form>` + BACKTICK + `,})}</html>`,
 			},
 		},
+		{
+			name:   "select in form",
+			source: `<form><select>{options.map((option) => (<option value={option.id}>{option.title}</option>))}</select><div><label>Title 3</label><input type="text" /></div><button type="submit">Submit</button></form>`,
+			want: want{
+				code: `<form><select>${options.map((option) => ($$render` + BACKTICK + `<option${$$addAttribute(option.id, "value")}>${option.title}</option>` + BACKTICK + `))}</select><div><label>Title 3</label><input type="text"></div><button type="submit">Submit</button></form>`,
+			},
+		},
 		{
 			name:   "slot inside of Base",
 			source: `<Base title="Home"><div>Hello</div></Base>`,
diff --git a/internal/token_test.go b/internal/token_test.go
@@ -346,6 +346,11 @@ func TestBasic(t *testing.T) {
 			`<select>{[1, 2, 3].map(num => <option>{num}</option>)}</select>`,
 			[]TokenType{StartTagToken, StartExpressionToken, TextToken, StartTagToken, StartExpressionToken, TextToken, EndExpressionToken, EndTagToken, TextToken, EndExpressionToken, EndTagToken},
 		},
+		{
+			"select with expression",
+			`<select>{[1, 2, 3].map(num => <option>{num}</option>)}</select><div>Hello</div>`,
+			[]TokenType{StartTagToken, StartExpressionToken, TextToken, StartTagToken, StartExpressionToken, TextToken, EndExpressionToken, EndTagToken, TextToken, EndExpressionToken, EndTagToken, StartTagToken, TextToken, EndTagToken},
+		},
 		{
 			"Markdown codeblock",
 			fmt.Sprintf(`<Markdown>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@astrojs/compiler': patch
 +---
++
 +Fix edge case with `select` elements and expression children