fix: fix input value when set to null.

openkraken · Aug 23, 2021 · fb0c0a1 · fb0c0a1
1 parent 60d4b35
commit fb0c0a1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/bridge/bindings/jsc/DOM/elements/input_element.cc b/bridge/bindings/jsc/DOM/elements/input_element.cc
@@ -101,8 +101,16 @@ bool JSInputElement::InputElementInstance::setProperty(std::string &name, JSValu
   if (prototypePropertyMap.count(name) > 0) return false;
 
   if (propertyMap.count(name) > 0) {
-    JSStringRef stringRef = JSValueToStringCopy(_hostClass->ctx, value, exception);
-    std::string string = JSStringToStdString(stringRef);
+    JSStringRef valueString;
+    // https://github.com/WebKit/WebKit/blob/main/Source/WebCore/html/HTMLInputElement.cpp#L1060
+    // Webkit have specific logic when value is null.
+    if (name == "value" && JSValueIsNull(ctx, value)) {
+      valueString = JSStringCreateWithUTF8CString(""); // input's fallback value is null.
+    } else {
+      valueString = JSValueToStringCopy(_hostClass->ctx, value, exception);
+    }
+
+    std::string string = JSStringToStdString(valueString);
     NativeString args_01{};
     NativeString args_02{};
     buildUICommandArgs(name, string, args_01, args_02);

diff --git a/integration_tests/specs/dom/elements/input.ts b/integration_tests/specs/dom/elements/input.ts
@@ -53,10 +53,10 @@ describe('Tags input', () => {
     div = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
             lineHeight: '50px',
-            fontSize: '30px', 
+            fontSize: '30px',
         },
       }
     );
@@ -69,7 +69,7 @@ describe('Tags input', () => {
     input = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
             lineHeight: '10px',
             fontSize: '30px'
@@ -86,7 +86,7 @@ describe('Tags input', () => {
     input = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
             lineHeight: '100px',
             fontSize: '30px'
@@ -97,15 +97,15 @@ describe('Tags input', () => {
 
     await snapshot();
   });
-   
+
   it('line-height changes when height is not set', async (done) => {
     let input;
     input = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
-          lineHeight: '50px', 
+          lineHeight: '50px',
         },
       }
     );
@@ -125,7 +125,7 @@ describe('Tags input', () => {
     input = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
           fontSize: '30px'
         },
@@ -141,7 +141,7 @@ describe('Tags input', () => {
     input = createElement(
       'input',
       {
-        value: '1234567890',   
+        value: '1234567890',
         style: {
         },
       }
@@ -375,4 +375,14 @@ describe('Tags input', () => {
 
     simulateClick(10, 10);
   });
+
+  it('should return empty string when set value to null', (done) => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.value = '1234';
+    expect(input.value).toBe('1234');
+    // @ts-ignore
+    input.value = null;
+    expect(input.value).toBe('');
+  });
 });