From 92c269b0f0177cb54540ce03507de81370d67c50 Mon Sep 17 00:00:00 2001
From: Kid <44045911+kidonng@users.noreply.github.com>
Date: Tue, 3 Dec 2024 20:08:30 +0800
Subject: [PATCH] fix: devtools warnings about dev toolbar form fields (#12590)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
---
 .changeset/lazy-bottles-trade.md                             | 5 +++++
 .../src/runtime/client/dev-toolbar/ui-library/select.ts      | 1 +
 .../src/runtime/client/dev-toolbar/ui-library/toggle.ts      | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 .changeset/lazy-bottles-trade.md

diff --git a/.changeset/lazy-bottles-trade.md b/.changeset/lazy-bottles-trade.md
new file mode 100644
index 000000000000..009e136ddd1e
--- /dev/null
+++ b/.changeset/lazy-bottles-trade.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+fix: devtools warnings about dev toolbar form fields
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
index ee56f3cb0796..341bfdd0776f 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
@@ -84,6 +84,7 @@ export class DevToolbarSelect extends HTMLElement {
 	}
 
 	connectedCallback() {
+		this.element.name = 'dev-toolbar-select';
 		this.shadowRoot.append(this.element);
 		this.updateStyle();
 	}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
index 3f5e8f225b91..9a0b775b8588 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
@@ -122,6 +122,7 @@ export class DevToolbarToggle extends HTMLElement {
 
 	connectedCallback() {
 		this.input.type = 'checkbox';
+		this.input.name = 'dev-toolbar-toggle';
 		this.shadowRoot.append(this.input);
 		this.updateStyle();
 	}