fix(omi): missing form element value

Author: dntzhang

packages/omi/examples/form.tsx

@@ -0,0 +1,42 @@
+import { render, tag, Component, h } from '@/index'
+
+@tag('form-demo')
+class FormDemo extends Component {
+  state = {
+    show: true,
+    value1: 'volvo',
+    value2: '',
+  }
+
+  onChange = (evt) => {
+    this.state.value1 = evt.target.value
+    this.update()
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.show && <select id="cars" value={this.state.value1} onChange={this.onChange} name="cars">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>}
+
+        <select id="cars2" value={this.state.value2} name="cars">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+
+        <button onClick={(evt) => {
+          this.state.show = !this.state.show
+          this.update()
+        }}>验证this.update后表单状态</button>
+      </div>
+    )
+  }
+}
+
+render(<form-demo />, document.body)

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "7.3.9",
+  "version": "7.3.10",
   "scripts": {
     "start": "vite",
     "dev-vite": "vite",

packages/omi/src/dom.ts

@@ -109,8 +109,7 @@ export function setAccessor(
     name !== 'type' &&
     name !== 'css' &&
     !isSvg &&
-    name in node &&
-    value !== ''
+    name in node
   ) {
     //value !== '' fix for selected, disabled, checked with pure element
     // Attempt to set a DOM property to the given value.

packages/omi/src/index.ts

@@ -18,4 +18,4 @@ export { Signal } from './signal'
 export { css } from './css-tag'
 export { mixin } from './options'
 export { registerDirective } from './directive'
-export const version = '7.3.9'
+export const version = '7.3.10'

packages/omi/test/dom.test.jsx

@@ -72,6 +72,47 @@ describe('dom', () => {
     expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<div><span>abc</span></div>')
   })
 
+  it('form', () => {
+    class Ele extends Component {
+    
+      state = {
+        show: true,
+        value1: 'volvo',
+        value2: '',
+      }    
+
+      installed() {
+        this.state.show = false
+        this.update()
+      }
+     
+      render(props) {
+        return <div>
+        {this.state.show && <select id="cars" value={this.state.value1} onChange={this.onChange} name="cars">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>}
+
+        <select id="cars2" value={this.state.value2} name="cars">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+
+      </div>
+      }
+    }
+
+    const node = genNode()
+    define(node.name, Ele)
+    render(<node.name />, parentElement)
+
+    expect(parentElement.firstChild.shadowRoot.querySelector('select').value).toBe('')
+  })
+
   it('string style', () => {
     class Ele extends Component {