From 1ee88cb4bb557560f10eab136464c321d4dee81e Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 13 Sep 2021 23:32:03 +0800
Subject: [PATCH] fix(nativeSelectValue): update selected value on change
 (#3154)

* Fix nativeSelectValue not picking up selection

* Use props instead

* Add test for selected prop
---
 lib/commons/text/form-control-value.js      |  2 +-
 lib/core/base/virtual-node/virtual-node.js  |  6 ++++--
 test/commons/text/form-control-value.js     | 14 ++++++++++++++
 test/core/base/virtual-node/virtual-node.js | 10 ++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/lib/commons/text/form-control-value.js b/lib/commons/text/form-control-value.js
index 0692b3ae2d..2a4b672649 100644
--- a/lib/commons/text/form-control-value.js
+++ b/lib/commons/text/form-control-value.js
@@ -106,7 +106,7 @@ function nativeSelectValue(node) {
   }
 
   const options = querySelectorAll(vNode, 'option');
-  const selectedOptions = options.filter(option => option.hasAttr('selected'));
+  const selectedOptions = options.filter(option => option.props.selected);
 
   // browser automatically selects the first option
   if (!selectedOptions.length) {
diff --git a/lib/core/base/virtual-node/virtual-node.js b/lib/core/base/virtual-node/virtual-node.js
index 55010b977b..4235b23c20 100644
--- a/lib/core/base/virtual-node/virtual-node.js
+++ b/lib/core/base/virtual-node/virtual-node.js
@@ -62,7 +62,8 @@ class VirtualNode extends AbstractVirtualNode {
         id,
         multiple,
         nodeValue,
-        value
+        value,
+        selected
       } = this.actualNode;
 
       this._cache.props = {
@@ -72,7 +73,8 @@ class VirtualNode extends AbstractVirtualNode {
         type: this._type,
         multiple,
         nodeValue,
-        value
+        value,
+        selected
       };
     }
 
diff --git a/test/commons/text/form-control-value.js b/test/commons/text/form-control-value.js
index e4eda28157..88f6d39345 100644
--- a/test/commons/text/form-control-value.js
+++ b/test/commons/text/form-control-value.js
@@ -2,6 +2,7 @@ describe('text.formControlValue', function() {
   var formControlValue = axe.commons.text.formControlValue;
   var queryFixture = axe.testUtils.queryFixture;
   var fixtureSetup = axe.testUtils.fixtureSetup;
+  var injectIntoFixture = axe.testUtils.injectIntoFixture;
   var fixture = document.querySelector('#fixture');
 
   function getNodeType(node) {
@@ -149,6 +150,19 @@ describe('text.formControlValue', function() {
       assert.equal(nativeSelectValue(target), 'baz');
     });
 
+    it('returns the selected option text after selection', function() {
+      injectIntoFixture(
+        '<select id="target">' +
+          '  <option value="foo" selected>foo</option>' +
+          '  <option value="bar">baz</option>' +
+          '</select>'
+      );
+      fixture.querySelector('#target').value = 'bar';
+      var rootNode = axe.setup(fixture);
+      var target = axe.utils.querySelectorAll(rootNode, '#target')[0];
+      assert.equal(nativeSelectValue(target), 'baz');
+    });
+
     it('returns multiple options, space seperated', function() {
       // Can't apply multiple "selected" props without setting "multiple"
       var target = queryFixture(
diff --git a/test/core/base/virtual-node/virtual-node.js b/test/core/base/virtual-node/virtual-node.js
index dbd5459ae0..976035e942 100644
--- a/test/core/base/virtual-node/virtual-node.js
+++ b/test/core/base/virtual-node/virtual-node.js
@@ -39,6 +39,16 @@ describe('VirtualNode', function() {
       assert.equal(vNode.props.type, 'text');
     });
 
+    it('should reflect selected property', function() {
+      node = document.createElement('option');
+      var vNode = new VirtualNode(node);
+      assert.equal(vNode.props.selected, false);
+
+      node.selected = true;
+      vNode = new VirtualNode(node);
+      assert.equal(vNode.props.selected, true);
+    });
+
     it('should lowercase type', function() {
       var node = document.createElement('input');
       node.setAttribute('type', 'COLOR');