From d2ae6a9db246b7780327de0d0c5d4fca0204ef1f Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 1 Mar 2022 18:10:16 +0100
Subject: [PATCH] fix: isDisabled check with option/optgroup (#12437)

---
 .../src/server/injected/injectedScript.ts     |  2 +-
 tests/page/elementhandle-convenience.spec.ts  | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
index 312ad28f1a..b9d92e3680 100644
--- a/packages/playwright-core/src/server/injected/injectedScript.ts
+++ b/packages/playwright-core/src/server/injected/injectedScript.ts
@@ -1237,7 +1237,7 @@ function deepEquals(a: any, b: any): boolean {
 }
 
 function isElementDisabled(element: Element): boolean {
-  const isRealFormControl = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.nodeName);
+  const isRealFormControl = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTION', 'OPTGROUP'].includes(element.nodeName);
   if (isRealFormControl && element.hasAttribute('disabled'))
     return true;
   if (isRealFormControl && hasDisabledFieldSet(element))
diff --git a/tests/page/elementhandle-convenience.spec.ts b/tests/page/elementhandle-convenience.spec.ts
index bb5a4fb657..ff17d8c9c5 100644
--- a/tests/page/elementhandle-convenience.spec.ts
+++ b/tests/page/elementhandle-convenience.spec.ts
@@ -260,6 +260,29 @@ it('isEnabled and isDisabled should work', async ({ page }) => {
   expect(await page.isDisabled(':text("button2")')).toBe(false);
 });
 
+it('isEnabled and isDisabled should work with <select/> option/optgroup correctly', async ({ page }) => {
+  await page.setContent(`
+    <select name="select">
+      <option id="enabled1" value="1">Enabled</option>
+      <option id="disabled1" value="2" disabled>Disabled</option>
+      <optgroup label="Foo1">
+        <option value="mercedes">Mercedes</option>
+      </optgroup>
+      <optgroup label="Foo2" disabled>
+        <option value="mercedes">Mercedes</option>
+      </optgroup>
+    </select>
+  `);
+  expect((await (await page.$('#enabled1')).isEnabled())).toBe(true);
+  expect((await (await page.$('#enabled1')).isDisabled())).toBe(false);
+  expect((await (await page.$('#disabled1')).isEnabled())).toBe(false);
+  expect((await (await page.$('#disabled1')).isDisabled())).toBe(true);
+  expect((await (await page.$('optgroup >> nth=0')).isEnabled())).toBe(true);
+  expect((await (await page.$('optgroup >> nth=0')).isDisabled())).toBe(false);
+  expect((await (await page.$('optgroup >> nth=1')).isEnabled())).toBe(false);
+  expect((await (await page.$('optgroup >> nth=1')).isDisabled())).toBe(true);
+});
+
 it('isEditable should work', async ({ page }) => {
   await page.setContent(`<input id=input1 disabled><textarea></textarea><input id=input2>`);
   await page.$eval('textarea', t => t.readOnly = true);