From e8096a4b9cdd720d5cbfb181b60e1ac72efbb2e5 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 9 Feb 2021 12:11:24 +0800
Subject: [PATCH 1/3] fix(runtime-core): the select tag's multiple prop should
 be set before the children mounting

---
 packages/runtime-core/src/renderer.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index d1fb8db5468..1872dafafd7 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -741,6 +741,20 @@ function baseCreateRenderer(
         props && props.is
       )
 
+      if (vnode.type === 'select' && props && props.multiple != null) {
+        hostPatchProp(
+          el,
+          'multiple',
+          null,
+          props.multiple,
+          false /* isSVG */,
+          vnode.children as VNode[],
+          parentComponent,
+          parentSuspense,
+          unmountChildren
+        )
+      }
+
       // mount children first, since some props may rely on child content
       // being already rendered, e.g. `<select value>`
       if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {

From e1280d25e35bfe0424705f627a2b8d5a3a053123 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 9 Feb 2021 12:29:36 +0800
Subject: [PATCH 2/3] fix: should not pollute the runtime-core

---
 packages/runtime-core/src/renderer.ts | 23 ++++++-----------------
 packages/runtime-dom/src/nodeOps.ts   | 13 ++++++++++---
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 1872dafafd7..4f67869b658 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -11,7 +11,8 @@ import {
   Static,
   VNodeNormalizedRef,
   VNodeHook,
-  VNodeNormalizedRefAtom
+  VNodeNormalizedRefAtom,
+  VNodeProps
 } from './vnode'
 import {
   ComponentInternalInstance,
@@ -114,7 +115,8 @@ export interface RendererOptions<
   createElement(
     type: string,
     isSVG?: boolean,
-    isCustomizedBuiltIn?: string
+    isCustomizedBuiltIn?: string,
+    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
   ): HostElement
   createText(text: string): HostNode
   createComment(text: string): HostNode
@@ -738,23 +740,10 @@ function baseCreateRenderer(
       el = vnode.el = hostCreateElement(
         vnode.type as string,
         isSVG,
-        props && props.is
+        props && props.is,
+        props
       )
 
-      if (vnode.type === 'select' && props && props.multiple != null) {
-        hostPatchProp(
-          el,
-          'multiple',
-          null,
-          props.multiple,
-          false /* isSVG */,
-          vnode.children as VNode[],
-          parentComponent,
-          parentSuspense,
-          unmountChildren
-        )
-      }
-
       // mount children first, since some props may rely on child content
       // being already rendered, e.g. `<select value>`
       if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 06e59221113..4bf89951723 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -19,10 +19,17 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     }
   },
 
-  createElement: (tag, isSVG, is): Element =>
-    isSVG
+  createElement: (tag, isSVG, is, props): Element => {
+    const el = isSVG
       ? doc.createElementNS(svgNS, tag)
-      : doc.createElement(tag, is ? { is } : undefined),
+      : doc.createElement(tag, is ? { is } : undefined)
+
+    if (tag === 'select' && props && props.multiple != null) {
+      ;(el as HTMLSelectElement).multiple = props.multiple
+    }
+
+    return el
+  },
 
   createText: text => doc.createTextNode(text),
 

From f33f40eeb25b4a249163e72a67303b2980de46d8 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 9 Feb 2021 12:54:29 +0800
Subject: [PATCH 3/3] chore: add test case

---
 packages/runtime-dom/__tests__/nodeOps.spec.ts | 18 +++++++++++++++++-
 packages/runtime-dom/src/nodeOps.ts            |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/__tests__/nodeOps.spec.ts b/packages/runtime-dom/__tests__/nodeOps.spec.ts
index 3f72379d624..ce9764471d1 100644
--- a/packages/runtime-dom/__tests__/nodeOps.spec.ts
+++ b/packages/runtime-dom/__tests__/nodeOps.spec.ts
@@ -1,6 +1,6 @@
 import { nodeOps } from '../src/nodeOps'
 
-describe('nodeOps', () => {
+describe('runtime-dom: node-ops', () => {
   test('the _value property should be cloned', () => {
     const el = nodeOps.createElement('input') as HTMLDivElement & {
       _value: any
@@ -9,4 +9,20 @@ describe('nodeOps', () => {
     const cloned = nodeOps.cloneNode!(el) as HTMLDivElement & { _value: any }
     expect(cloned._value).toBe(1)
   })
+
+  test("the <select>'s multiple attr should be set in createElement", () => {
+    const el = nodeOps.createElement('select', false, undefined, {
+      multiple: ''
+    }) as HTMLSelectElement
+    const option1 = nodeOps.createElement('option') as HTMLOptionElement
+    const option2 = nodeOps.createElement('option') as HTMLOptionElement
+    option1.selected = true
+    option2.selected = true
+    nodeOps.insert(option1, el)
+    nodeOps.insert(option2, el)
+
+    expect(el.multiple).toBe(true)
+    expect(option1.selected).toBe(true)
+    expect(option2.selected).toBe(true)
+  })
 })
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index 4bf89951723..95d9940a5fd 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -25,7 +25,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       : doc.createElement(tag, is ? { is } : undefined)
 
     if (tag === 'select' && props && props.multiple != null) {
-      ;(el as HTMLSelectElement).multiple = props.multiple
+      ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
     }
 
     return el