From b59a9ebd29b501fc93aa5a092f04043e06d6b811 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Wed, 2 Jan 2019 14:22:51 +0100
Subject: [PATCH 01/15] add del button functionality

---
 src/components/fields/ObjectField.js | 16 +++++++
 src/components/fields/SchemaField.js | 70 ++++++++++++++++++++++------
 2 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index 4b7edb41f3..89a5d379b6 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -82,6 +82,10 @@ class ObjectField extends Component {
   onPropertyChange = name => {
     return (value, errorSchema) => {
       const newFormData = { ...this.props.formData, [name]: value };
+      console.group();
+      console.log(this.props.newFormData);
+      console.log({ [name]: value });
+      console.groupEnd();
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -93,6 +97,17 @@ class ObjectField extends Component {
     };
   };
 
+  onDropIndexClick = index => {
+    return event => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, formData } = this.props;
+      delete formData[index];
+      onChange(formData);
+    };
+  };
+
   getAvailableKey = (preferredKey, formData) => {
     var index = 0;
     var newKey = preferredKey;
@@ -219,6 +234,7 @@ class ObjectField extends Component {
               registry={registry}
               disabled={disabled}
               readonly={readonly}
+              onDropIndexClick={this.onDropIndexClick}
             />
           ),
           name,
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index fd7ff9a795..e9f9ec24c3 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -1,4 +1,5 @@
 import { ADDITIONAL_PROPERTY_FLAG } from "../../utils";
+import IconButton from "../IconButton";
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -121,31 +122,68 @@ function DefaultTemplate(props) {
     required,
     displayLabel,
     onKeyChange,
+    onDropIndexClick,
   } = props;
   if (hidden) {
     return children;
   }
+  const btnStyle = {
+    flex: 1,
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontWeight: "bold",
+    height: "34px",
+  };
   const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
-  const keyLabel = `${label} Key`;
+  // const keyLabel = `Key`;
+
+  const contentStyle = additional
+    ? {
+        clear: "both",
+        display: "flex",
+        marginBottom: 0,
+      }
+    : {};
 
   return (
-    <div className={classNames}>
+    <div className={classNames} style={contentStyle}>
       {additional && (
-        <div className="form-group">
-          <Label label={keyLabel} required={required} id={`${id}-key`} />
-          <LabelInput
-            label={label}
-            required={required}
-            id={`${id}-key`}
-            onChange={onKeyChange}
-          />
+        <div
+          className="col-lg-6"
+          style={{
+            padding: 0,
+          }}>
+          <div className="form-group">
+            {/* <Label label={keyLabel} required={required} id={`${id}-key`} /> */}
+            <LabelInput
+              label={label}
+              required={required}
+              id={`${id}-key`}
+              onChange={onKeyChange}
+            />
+          </div>
         </div>
       )}
-      {displayLabel && <Label label={label} required={required} id={id} />}
-      {displayLabel && description ? description : null}
-      {children}
-      {errors}
-      {help}
+      <div className={additional ? "col-lg-6" : ""}>
+        {displayLabel && (
+          <Label label={additional ? "" : label} required={required} id={id} />
+        )}
+        {displayLabel && description ? description : null}
+        {children}
+        {errors}
+        {help}
+      </div>
+      {additional && (
+        <IconButton
+          type="danger"
+          icon="remove"
+          className="array-item-remove"
+          tabIndex="-1"
+          style={btnStyle}
+          disabled={props.disabled || props.readonly}
+          onClick={onDropIndexClick(props.label)}
+        />
+      )}
     </div>
   );
 }
@@ -186,6 +224,7 @@ function SchemaFieldRender(props) {
     idPrefix,
     name,
     onKeyChange,
+    onDropIndexClick,
     required,
     registry = getDefaultRegistry(),
   } = props;
@@ -285,6 +324,7 @@ function SchemaFieldRender(props) {
     label,
     hidden,
     onKeyChange,
+    onDropIndexClick,
     required,
     disabled,
     readonly,

From a748ee13914c3e474128d05b238074420652e7a6 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Wed, 2 Jan 2019 14:45:17 +0100
Subject: [PATCH 02/15] delete unnecesary console.logs

---
 src/components/Form.js               | 1 +
 src/components/fields/ObjectField.js | 4 ----
 src/components/fields/SchemaField.js | 4 ++--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 6863d74374..cb7bee054b 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -130,6 +130,7 @@ export default class Form extends Component {
         errors: toErrorList(newErrorSchema),
       };
     }
+
     setState(this, state, () => {
       if (this.props.onChange) {
         this.props.onChange(this.state);
diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index 89a5d379b6..3aef92d5f8 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -82,10 +82,6 @@ class ObjectField extends Component {
   onPropertyChange = name => {
     return (value, errorSchema) => {
       const newFormData = { ...this.props.formData, [name]: value };
-      console.group();
-      console.log(this.props.newFormData);
-      console.log({ [name]: value });
-      console.groupEnd();
       this.props.onChange(
         newFormData,
         errorSchema &&
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index e9f9ec24c3..4b222f437f 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -135,7 +135,7 @@ function DefaultTemplate(props) {
     height: "34px",
   };
   const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
-  // const keyLabel = `Key`;
+  const keyLabel = `${label} Key`;
 
   const contentStyle = additional
     ? {
@@ -154,7 +154,7 @@ function DefaultTemplate(props) {
             padding: 0,
           }}>
           <div className="form-group">
-            {/* <Label label={keyLabel} required={required} id={`${id}-key`} /> */}
+            <Label label={keyLabel} required={required} id={`${id}-key`} />
             <LabelInput
               label={label}
               required={required}

From 6559d1d7d3ef0d05ebb7ebaaa7688ca62aefc995 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 10:40:28 +0100
Subject: [PATCH 03/15] fix tests

---
 .vscode/launch.json                  | 22 ++++++++++++++++++++++
 package.json                         |  3 ++-
 src/components/fields/ObjectField.js |  5 +++++
 src/components/fields/SchemaField.js |  7 ++-----
 src/components/fields/StringField.js |  1 -
 test/ArrayFieldTemplate_test.js      |  2 +-
 test/ArrayField_test.js              |  3 ++-
 test/ObjectField_test.js             |  8 ++++----
 test/SchemaField_test.js             |  2 +-
 test/StringField_test.js             | 20 ++++++++++----------
 10 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000..e2335c0a35
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,22 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/package.json b/package.json
index e2a1f623d6..3f49e2afe2 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "preversion": "npm run build:playground && npm run dist && npm run build:readme && npm run cs-check && npm run lint",
     "start": "node devServer.js",
     "tdd": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
-    "test": "cross-env NODE_ENV=test mocha --require babel-register --require ./test/setup-jsdom.js test/**/*_test.js"
+    "test": "cross-env NODE_ENV=test mocha --require babel-register --require ./test/setup-jsdom.js test/**/*_test.js",
+    "temp": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/SchemaField_test.js"
   },
   "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
   "lint-staged": {
diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index 3aef92d5f8..ed4dc0703d 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -28,6 +28,7 @@ function DefaultObjectFieldTemplate(props) {
   };
 
   const { TitleField, DescriptionField } = props;
+  console.log(props.properties);
   return (
     <fieldset>
       {(props.uiSchema["ui:title"] || props.title) && (
@@ -81,6 +82,10 @@ class ObjectField extends Component {
 
   onPropertyChange = name => {
     return (value, errorSchema) => {
+      console.group();
+      console.log(name);
+      console.log(value);
+      console.groupEnd();
       const newFormData = { ...this.props.formData, [name]: value };
       this.props.onChange(
         newFormData,
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 4b222f437f..35557bdf66 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -108,7 +108,6 @@ function ErrorList(props) {
     </div>
   );
 }
-
 function DefaultTemplate(props) {
   const {
     id,
@@ -164,10 +163,9 @@ function DefaultTemplate(props) {
           </div>
         </div>
       )}
+
       <div className={additional ? "col-lg-6" : ""}>
-        {displayLabel && (
-          <Label label={additional ? "" : label} required={required} id={id} />
-        )}
+        {displayLabel && <Label label={label} required={required} id={id} />}
         {displayLabel && description ? description : null}
         {children}
         {errors}
@@ -187,7 +185,6 @@ function DefaultTemplate(props) {
     </div>
   );
 }
-
 if (process.env.NODE_ENV !== "production") {
   DefaultTemplate.propTypes = {
     id: PropTypes.string,
diff --git a/src/components/fields/StringField.js b/src/components/fields/StringField.js
index 91fcf6911e..6ef3f3cbff 100644
--- a/src/components/fields/StringField.js
+++ b/src/components/fields/StringField.js
@@ -34,7 +34,6 @@ function StringField(props) {
     uiSchema
   );
   const Widget = getWidget(schema, widget, widgets);
-
   return (
     <Widget
       options={{ ...options, enumOptions }}
diff --git a/test/ArrayFieldTemplate_test.js b/test/ArrayFieldTemplate_test.js
index b6bad381e8..1e75a24dce 100644
--- a/test/ArrayFieldTemplate_test.js
+++ b/test/ArrayFieldTemplate_test.js
@@ -53,7 +53,7 @@ describe("ArrayFieldTemplate", () => {
           ArrayFieldTemplate,
         });
 
-        expect(node.querySelectorAll(".field-array div")).to.have.length.of(3);
+        expect(node.querySelectorAll(".field-array div")).to.have.length.of(4);
       });
     });
 
diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js
index 633c57347c..5e90802bc8 100644
--- a/test/ArrayField_test.js
+++ b/test/ArrayField_test.js
@@ -24,7 +24,8 @@ describe("ArrayField", () => {
       const { node } = createFormComponent({ schema: { type: "array" } });
 
       expect(
-        node.querySelector(".field-array > .unsupported-field").textContent
+        node.querySelector(".field-array > div > .unsupported-field")
+          .textContent
       ).to.contain("Missing items definition");
     });
   });
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index a0554e4b5f..51986e4f23 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -197,7 +197,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -212,7 +212,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -277,7 +277,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -310,7 +310,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
diff --git a/test/SchemaField_test.js b/test/SchemaField_test.js
index fa503d767e..714375660a 100644
--- a/test/SchemaField_test.js
+++ b/test/SchemaField_test.js
@@ -313,7 +313,7 @@ describe("SchemaField", () => {
       submit(node);
 
       const matches = node.querySelectorAll(
-        "form > .form-group > div > .error-detail .text-danger"
+        "form > .form-group > div > div > .error-detail .text-danger"
       );
       expect(matches).to.have.length.of(1);
       expect(matches[0].textContent).to.eql("container");
diff --git a/test/StringField_test.js b/test/StringField_test.js
index 4a9625ca76..9fe1433391 100644
--- a/test/StringField_test.js
+++ b/test/StringField_test.js
@@ -28,7 +28,7 @@ describe("StringField", () => {
       });
 
       expect(
-        node.querySelectorAll(".field input[type=text]")
+        node.querySelectorAll(".field input[type=text]"),
       ).to.have.length.of(1);
     });
 
@@ -408,7 +408,7 @@ describe("StringField", () => {
       });
 
       expect(
-        node.querySelectorAll(".field [type=datetime-local]")
+        node.querySelectorAll(".field [type=datetime-local]"),
       ).to.have.length.of(1);
     });
 
@@ -440,7 +440,7 @@ describe("StringField", () => {
       });
 
       expect(node.querySelector("[type=datetime-local]").value).eql(
-        utcToLocal(newDatetime)
+        utcToLocal(newDatetime),
       );
     });
 
@@ -769,7 +769,7 @@ describe("StringField", () => {
 
       const lengths = [].map.call(
         node.querySelectorAll("select"),
-        node => node.length
+        node => node.length,
       );
 
       expect(lengths).eql([
@@ -840,7 +840,7 @@ describe("StringField", () => {
 
         const buttonLabels = [].map.call(
           node.querySelectorAll("a.btn"),
-          x => x.textContent
+          x => x.textContent,
         );
         expect(buttonLabels).eql(["Now", "Clear"]);
       });
@@ -1016,7 +1016,7 @@ describe("StringField", () => {
 
       const lengths = [].map.call(
         node.querySelectorAll("select"),
-        node => node.length
+        node => node.length,
       );
 
       expect(lengths).eql([
@@ -1099,7 +1099,7 @@ describe("StringField", () => {
 
         const buttonLabels = [].map.call(
           node.querySelectorAll("a.btn"),
-          x => x.textContent
+          x => x.textContent,
         );
         expect(buttonLabels).eql(["Now", "Clear"]);
       });
@@ -1117,7 +1117,7 @@ describe("StringField", () => {
 
         const expected = toDateString(
           parseDateString(new Date().toJSON()),
-          false
+          false,
         );
         expect(comp.state.formData).eql(expected);
       });
@@ -1549,8 +1549,8 @@ describe("StringField", () => {
 
       return new Promise(setImmediate).then(() =>
         expect(comp.state.formData).eql(
-          "data:text/plain;name=file1.txt;base64,x="
-        )
+          "data:text/plain;name=file1.txt;base64,x=",
+        ),
       );
     });
 

From 8f5f597d5f9403a79a8c41268a6f89407ea8724c Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 14:10:49 +0100
Subject: [PATCH 04/15] remove unnecesary console.log

---
 src/components/fields/ObjectField.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index ed4dc0703d..2c022df6fb 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -28,7 +28,6 @@ function DefaultObjectFieldTemplate(props) {
   };
 
   const { TitleField, DescriptionField } = props;
-  console.log(props.properties);
   return (
     <fieldset>
       {(props.uiSchema["ui:title"] || props.title) && (
@@ -82,10 +81,6 @@ class ObjectField extends Component {
 
   onPropertyChange = name => {
     return (value, errorSchema) => {
-      console.group();
-      console.log(name);
-      console.log(value);
-      console.groupEnd();
       const newFormData = { ...this.props.formData, [name]: value };
       this.props.onChange(
         newFormData,
@@ -209,7 +204,6 @@ class ObjectField extends Component {
     }
 
     const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;
-
     const templateProps = {
       title: uiSchema["ui:title"] || title,
       description,

From ba1181dffc793f6a878b1e2fb3793550da830715 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 15:05:04 +0100
Subject: [PATCH 05/15] Fix disappearing key-value pair and repair delete
 button

---
 src/components/fields/ObjectField.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index 2c022df6fb..d070e87541 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -81,7 +81,7 @@ class ObjectField extends Component {
 
   onPropertyChange = name => {
     return (value, errorSchema) => {
-      const newFormData = { ...this.props.formData, [name]: value };
+      const newFormData = { ...this.props.formData, [name]: value || "" };
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -99,8 +99,9 @@ class ObjectField extends Component {
         event.preventDefault();
       }
       const { onChange, formData } = this.props;
-      delete formData[index];
-      onChange(formData);
+      const copiedFormData = { ...formData };
+      delete copiedFormData[index];
+      onChange(copiedFormData);
     };
   };
 
@@ -136,7 +137,6 @@ class ObjectField extends Component {
       );
     };
   };
-
   getDefaultValue(type) {
     switch (type) {
       case "string":
@@ -204,6 +204,7 @@ class ObjectField extends Component {
     }
 
     const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate;
+
     const templateProps = {
       title: uiSchema["ui:title"] || title,
       description,

From 939209c8325ab82e5133a624d66b3d93f82a0adc Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 15:06:00 +0100
Subject: [PATCH 06/15] Add .vscode to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 03c1b53ecb..ad934179f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ build
 dist
 lib
 yarn.lock
+.vscode
\ No newline at end of file

From d4569a97bd7dd4032242eee8cf0096fd1dd6c18f Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 15:36:49 +0100
Subject: [PATCH 07/15] fix tests

---
 src/components/fields/ObjectField.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index d070e87541..c2b2939b7b 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -81,7 +81,10 @@ class ObjectField extends Component {
 
   onPropertyChange = name => {
     return (value, errorSchema) => {
-      const newFormData = { ...this.props.formData, [name]: value || "" };
+      const newFormData = {
+        ...this.props.formData,
+        [name]: value,
+      };
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -137,6 +140,7 @@ class ObjectField extends Component {
       );
     };
   };
+
   getDefaultValue(type) {
     switch (type) {
       case "string":
@@ -187,7 +191,6 @@ class ObjectField extends Component {
     const title = schema.title === undefined ? name : schema.title;
     const description = uiSchema["ui:description"] || schema.description;
     let orderedProperties;
-
     try {
       const properties = Object.keys(schema.properties);
       orderedProperties = orderProperties(properties, uiSchema["ui:order"]);

From eb72a4e80ee247eb6770860f5d9b34917259085e Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 3 Jan 2019 15:59:55 +0100
Subject: [PATCH 08/15] Make test work for select/radio button

---
 src/components/fields/ObjectField.js | 25 +++++++++++++++++++------
 src/components/fields/SchemaField.js |  2 +-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index c2b2939b7b..f6489d3936 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -7,6 +7,7 @@ import {
   retrieveSchema,
   getDefaultRegistry,
   getUiOptions,
+  ADDITIONAL_PROPERTY_FLAG,
 } from "../../utils";
 
 function DefaultObjectFieldTemplate(props) {
@@ -79,12 +80,21 @@ class ObjectField extends Component {
     );
   }
 
-  onPropertyChange = name => {
+  onPropertyChange = (name, additionalProperties = false) => {
     return (value, errorSchema) => {
-      const newFormData = {
-        ...this.props.formData,
-        [name]: value,
-      };
+      let newFormData;
+      if (!value && additionalProperties) {
+        newFormData = {
+          ...this.props.formData,
+          [name]: "",
+        };
+      } else {
+        newFormData = {
+          ...this.props.formData,
+          [name]: value,
+        };
+      }
+
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -214,6 +224,9 @@ class ObjectField extends Component {
       TitleField,
       DescriptionField,
       properties: orderedProperties.map(name => {
+        const additionalPropertyFlag = schema.properties[name].hasOwnProperty(
+          ADDITIONAL_PROPERTY_FLAG
+        );
         return {
           content: (
             <SchemaField
@@ -227,7 +240,7 @@ class ObjectField extends Component {
               idPrefix={idPrefix}
               formData={formData[name]}
               onKeyChange={this.onKeyChange(name)}
-              onChange={this.onPropertyChange(name)}
+              onChange={this.onPropertyChange(name, additionalPropertyFlag)}
               onBlur={onBlur}
               onFocus={onFocus}
               registry={registry}
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 35557bdf66..a6d92c19a0 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -152,7 +152,7 @@ function DefaultTemplate(props) {
           style={{
             padding: 0,
           }}>
-          <div className="form-group">
+          <div className="form-group form-additional">
             <Label label={keyLabel} required={required} id={`${id}-key`} />
             <LabelInput
               label={label}

From 759d338e494f003f912b222c2fc45c577e2f8855 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Fri, 4 Jan 2019 08:16:39 +0100
Subject: [PATCH 09/15] Add test cases

---
 devServer.js             | 10 +++++---
 package.json             |  2 +-
 test/ObjectField_test.js | 55 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/devServer.js b/devServer.js
index 032a8a401b..ab385b0996 100644
--- a/devServer.js
+++ b/devServer.js
@@ -12,10 +12,12 @@ const webpackConfig = require("./webpack.config." + env);
 const compiler = webpack(webpackConfig);
 const app = express();
 
-app.use(require("webpack-dev-middleware")(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  noInfo: true
-}));
+app.use(
+  require("webpack-dev-middleware")(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    noInfo: true,
+  }),
+);
 
 app.use(require("webpack-hot-middleware")(compiler));
 
diff --git a/package.json b/package.json
index 3f49e2afe2..f177022ae7 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "start": "node devServer.js",
     "tdd": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
     "test": "cross-env NODE_ENV=test mocha --require babel-register --require ./test/setup-jsdom.js test/**/*_test.js",
-    "temp": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/SchemaField_test.js"
+    "temp": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/ObjectField_test.js"
   },
   "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
   "lint-staged": {
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index 51986e4f23..a5050d90e8 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -678,5 +678,60 @@ describe("ObjectField", () => {
 
       expect(node.querySelector(".object-property-expand button")).to.be.null;
     });
+
+    it("should not have delete button if expand button has not been clicked", () => {
+      const { node } = createFormComponent({ schema });
+
+      expect(node.querySelector(".form-group > .btn-danger")).eql(null);
+    });
+
+    it("should have delete button if expand button has been clicked", () => {
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      expect(node.querySelector(".form-group > .btn-danger")).eql(null);
+
+      Simulate.click(node.querySelector(".object-property-expand button"));
+
+      expect(node.querySelector(".form-group > .btn-danger")).to.not.be.null;
+    });
+
+    it("delete button should delete key-value pair", () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: { first: 1 },
+      });
+      expect(node.querySelector("#root_first-key").value).to.eql("first");
+      Simulate.click(node.querySelector(".form-group > .btn-danger"));
+      expect(node.querySelector("#root_first-key")).to.not.exist;
+    });
+
+    it("delete button should delete correct pair", () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: { first: 1, second: 2, third: 3 },
+      });
+      expect(node.querySelectorAll(".form-group > .btn-danger").length).to.eql(
+        3
+      );
+      Simulate.click(node.querySelectorAll(".form-group > .btn-danger")[1]);
+      expect(node.querySelector("#root_second-key")).to.not.exist;
+      expect(node.querySelectorAll(".form-group > .btn-danger").length).to.eql(
+        2
+      );
+    });
+
+    it("deleting content of value input should not delete pair", () => {
+      const { comp, node } = createFormComponent({
+        schema,
+        formData: { first: 1 },
+      });
+
+      Simulate.change(node.querySelector("#root_first"), {
+        target: { value: "" },
+      });
+      expect(comp.state.formData["first"]).eql("");
+    });
   });
 });

From c4719af99253d40a1aaf87ccc7e27d2630268f00 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Fri, 4 Jan 2019 09:26:17 +0100
Subject: [PATCH 10/15] Remove one file from PR and one helper function

---
 devServer.js           | 10 ++++------
 package.json           |  3 +--
 src/components/Form.js |  1 -
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/devServer.js b/devServer.js
index ab385b0996..032a8a401b 100644
--- a/devServer.js
+++ b/devServer.js
@@ -12,12 +12,10 @@ const webpackConfig = require("./webpack.config." + env);
 const compiler = webpack(webpackConfig);
 const app = express();
 
-app.use(
-  require("webpack-dev-middleware")(compiler, {
-    publicPath: webpackConfig.output.publicPath,
-    noInfo: true,
-  }),
-);
+app.use(require("webpack-dev-middleware")(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  noInfo: true
+}));
 
 app.use(require("webpack-hot-middleware")(compiler));
 
diff --git a/package.json b/package.json
index f177022ae7..e2a1f623d6 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,7 @@
     "preversion": "npm run build:playground && npm run dist && npm run build:readme && npm run cs-check && npm run lint",
     "start": "node devServer.js",
     "tdd": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
-    "test": "cross-env NODE_ENV=test mocha --require babel-register --require ./test/setup-jsdom.js test/**/*_test.js",
-    "temp": "cross-env NODE_ENV=test mocha --require babel-register --watch --require ./test/setup-jsdom.js test/ObjectField_test.js"
+    "test": "cross-env NODE_ENV=test mocha --require babel-register --require ./test/setup-jsdom.js test/**/*_test.js"
   },
   "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi --tab-width 2",
   "lint-staged": {
diff --git a/src/components/Form.js b/src/components/Form.js
index cb7bee054b..6863d74374 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -130,7 +130,6 @@ export default class Form extends Component {
         errors: toErrorList(newErrorSchema),
       };
     }
-
     setState(this, state, () => {
       if (this.props.onChange) {
         this.props.onChange(this.state);

From d21e0aabda80cb1567bc79a7f76eddcfd983c3fd Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Fri, 4 Jan 2019 09:31:53 +0100
Subject: [PATCH 11/15] Add one classname for value input

---
 src/components/fields/SchemaField.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index a6d92c19a0..66b615f7c1 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -164,7 +164,7 @@ function DefaultTemplate(props) {
         </div>
       )}
 
-      <div className={additional ? "col-lg-6" : ""}>
+      <div className={additional ? "col-lg-6 form-additional" : ""}>
         {displayLabel && <Label label={label} required={required} id={id} />}
         {displayLabel && description ? description : null}
         {children}

From 7f1a7f424b3e98670ea8b46111394ba2fcb4cafa Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Mon, 7 Jan 2019 16:13:38 +0100
Subject: [PATCH 12/15] remove accidentally added .vscode

---
 .vscode/launch.json | 22 ----------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index e2335c0a35..0000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "chrome",
-      "request": "attach",
-      "name": "Attach to Chrome",
-      "port": 9222,
-      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:8080",
-      "webRoot": "${workspaceFolder}"
-    }
-  ]
-}

From a558246cc0c803271ed0ada40a2c0f10d3e849e4 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Mon, 7 Jan 2019 20:03:45 +0100
Subject: [PATCH 13/15] linted codebase

---
 test/StringField_test.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/StringField_test.js b/test/StringField_test.js
index 9fe1433391..4a9625ca76 100644
--- a/test/StringField_test.js
+++ b/test/StringField_test.js
@@ -28,7 +28,7 @@ describe("StringField", () => {
       });
 
       expect(
-        node.querySelectorAll(".field input[type=text]"),
+        node.querySelectorAll(".field input[type=text]")
       ).to.have.length.of(1);
     });
 
@@ -408,7 +408,7 @@ describe("StringField", () => {
       });
 
       expect(
-        node.querySelectorAll(".field [type=datetime-local]"),
+        node.querySelectorAll(".field [type=datetime-local]")
       ).to.have.length.of(1);
     });
 
@@ -440,7 +440,7 @@ describe("StringField", () => {
       });
 
       expect(node.querySelector("[type=datetime-local]").value).eql(
-        utcToLocal(newDatetime),
+        utcToLocal(newDatetime)
       );
     });
 
@@ -769,7 +769,7 @@ describe("StringField", () => {
 
       const lengths = [].map.call(
         node.querySelectorAll("select"),
-        node => node.length,
+        node => node.length
       );
 
       expect(lengths).eql([
@@ -840,7 +840,7 @@ describe("StringField", () => {
 
         const buttonLabels = [].map.call(
           node.querySelectorAll("a.btn"),
-          x => x.textContent,
+          x => x.textContent
         );
         expect(buttonLabels).eql(["Now", "Clear"]);
       });
@@ -1016,7 +1016,7 @@ describe("StringField", () => {
 
       const lengths = [].map.call(
         node.querySelectorAll("select"),
-        node => node.length,
+        node => node.length
       );
 
       expect(lengths).eql([
@@ -1099,7 +1099,7 @@ describe("StringField", () => {
 
         const buttonLabels = [].map.call(
           node.querySelectorAll("a.btn"),
-          x => x.textContent,
+          x => x.textContent
         );
         expect(buttonLabels).eql(["Now", "Clear"]);
       });
@@ -1117,7 +1117,7 @@ describe("StringField", () => {
 
         const expected = toDateString(
           parseDateString(new Date().toJSON()),
-          false,
+          false
         );
         expect(comp.state.formData).eql(expected);
       });
@@ -1549,8 +1549,8 @@ describe("StringField", () => {
 
       return new Promise(setImmediate).then(() =>
         expect(comp.state.formData).eql(
-          "data:text/plain;name=file1.txt;base64,x=",
-        ),
+          "data:text/plain;name=file1.txt;base64,x="
+        )
       );
     });
 

From 967e319b47c76158da43111fa20296dbeff83dc7 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 10 Jan 2019 13:42:35 +0100
Subject: [PATCH 14/15] remove inline styles, make use of bootstrap 3 styles
 and fix related tests

---
 .gitignore                           |  3 +-
 src/components/fields/ObjectField.js | 26 +++++----
 src/components/fields/SchemaField.js | 83 ++++++++++++----------------
 test/ArrayFieldTemplate_test.js      |  2 +-
 test/ArrayField_test.js              |  2 +-
 test/ObjectField_test.js             | 30 +++++-----
 test/SchemaField_test.js             |  2 +-
 7 files changed, 70 insertions(+), 78 deletions(-)

diff --git a/.gitignore b/.gitignore
index ad934179f3..94b5fd5793 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,4 @@ node_modules
 build
 dist
 lib
-yarn.lock
-.vscode
\ No newline at end of file
+yarn.lock
\ No newline at end of file
diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js
index f6489d3936..982aa3aaff 100644
--- a/src/components/fields/ObjectField.js
+++ b/src/components/fields/ObjectField.js
@@ -80,10 +80,13 @@ class ObjectField extends Component {
     );
   }
 
-  onPropertyChange = (name, additionalProperties = false) => {
+  onPropertyChange = (name, addedByAdditionalProperties = false) => {
     return (value, errorSchema) => {
       let newFormData;
-      if (!value && additionalProperties) {
+      //section below sets zero value of input field to empty string
+      //instead of undefined, so that value input in additionalProperties
+      //doesn't disappear when emptied
+      if (!value && addedByAdditionalProperties) {
         newFormData = {
           ...this.props.formData,
           [name]: "",
@@ -106,14 +109,12 @@ class ObjectField extends Component {
     };
   };
 
-  onDropIndexClick = index => {
+  onDropIndexClick = key => {
     return event => {
-      if (event) {
-        event.preventDefault();
-      }
+      event.preventDefault();
       const { onChange, formData } = this.props;
       const copiedFormData = { ...formData };
-      delete copiedFormData[index];
+      delete copiedFormData[key];
       onChange(copiedFormData);
     };
   };
@@ -224,9 +225,9 @@ class ObjectField extends Component {
       TitleField,
       DescriptionField,
       properties: orderedProperties.map(name => {
-        const additionalPropertyFlag = schema.properties[name].hasOwnProperty(
-          ADDITIONAL_PROPERTY_FLAG
-        );
+        const addedByAdditionalProperties = schema.properties[
+          name
+        ].hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
         return {
           content: (
             <SchemaField
@@ -240,7 +241,10 @@ class ObjectField extends Component {
               idPrefix={idPrefix}
               formData={formData[name]}
               onKeyChange={this.onKeyChange(name)}
-              onChange={this.onPropertyChange(name, additionalPropertyFlag)}
+              onChange={this.onPropertyChange(
+                name,
+                addedByAdditionalProperties
+              )}
               onBlur={onBlur}
               onFocus={onFocus}
               registry={registry}
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 66b615f7c1..1d10983c05 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -126,62 +126,49 @@ function DefaultTemplate(props) {
   if (hidden) {
     return children;
   }
-  const btnStyle = {
-    flex: 1,
-    paddingLeft: 10,
-    paddingRight: 10,
-    fontWeight: "bold",
-    height: "34px",
-  };
+
   const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
   const keyLabel = `${label} Key`;
 
-  const contentStyle = additional
-    ? {
-        clear: "both",
-        display: "flex",
-        marginBottom: 0,
-      }
-    : {};
-
   return (
-    <div className={classNames} style={contentStyle}>
-      {additional && (
+    <div className={classNames}>
+      <div className={additional ? "row" : ""}>
+        {additional && (
+          <div className="col-xs-5 form-additional">
+            <div className="form-group">
+              <Label label={keyLabel} required={required} id={`${id}-key`} />
+              <LabelInput
+                label={label}
+                required={required}
+                id={`${id}-key`}
+                onChange={onKeyChange}
+              />
+            </div>
+          </div>
+        )}
+
         <div
-          className="col-lg-6"
-          style={{
-            padding: 0,
-          }}>
-          <div className="form-group form-additional">
-            <Label label={keyLabel} required={required} id={`${id}-key`} />
-            <LabelInput
-              label={label}
-              required={required}
-              id={`${id}-key`}
-              onChange={onKeyChange}
+          className={additional ? "form-additional form-group col-xs-5" : ""}>
+          {displayLabel && <Label label={label} required={required} id={id} />}
+          {displayLabel && description ? description : null}
+          {children}
+          {errors}
+          {help}
+        </div>
+        <div className="col-xs-2">
+          {additional && (
+            <IconButton
+              type="danger"
+              icon="remove"
+              className="array-item-remove btn-block"
+              tabIndex="-1"
+              style={{ border: "0" }}
+              disabled={props.disabled || props.readonly}
+              onClick={onDropIndexClick(props.label)}
             />
-          </div>
+          )}
         </div>
-      )}
-
-      <div className={additional ? "col-lg-6 form-additional" : ""}>
-        {displayLabel && <Label label={label} required={required} id={id} />}
-        {displayLabel && description ? description : null}
-        {children}
-        {errors}
-        {help}
       </div>
-      {additional && (
-        <IconButton
-          type="danger"
-          icon="remove"
-          className="array-item-remove"
-          tabIndex="-1"
-          style={btnStyle}
-          disabled={props.disabled || props.readonly}
-          onClick={onDropIndexClick(props.label)}
-        />
-      )}
     </div>
   );
 }
diff --git a/test/ArrayFieldTemplate_test.js b/test/ArrayFieldTemplate_test.js
index 1e75a24dce..9abc9db7af 100644
--- a/test/ArrayFieldTemplate_test.js
+++ b/test/ArrayFieldTemplate_test.js
@@ -53,7 +53,7 @@ describe("ArrayFieldTemplate", () => {
           ArrayFieldTemplate,
         });
 
-        expect(node.querySelectorAll(".field-array div")).to.have.length.of(4);
+        expect(node.querySelectorAll(".field-array div")).to.have.length.of(6);
       });
     });
 
diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js
index 5e90802bc8..40e7f90b3a 100644
--- a/test/ArrayField_test.js
+++ b/test/ArrayField_test.js
@@ -24,7 +24,7 @@ describe("ArrayField", () => {
       const { node } = createFormComponent({ schema: { type: "array" } });
 
       expect(
-        node.querySelector(".field-array > div > .unsupported-field")
+        node.querySelector(".field-array > div > div > .unsupported-field")
           .textContent
       ).to.contain("Missing items definition");
     });
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index a5050d90e8..b546ba55bf 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -197,7 +197,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > div > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -212,7 +212,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > div > label"),
+        node.querySelectorAll(".field > div > div> label"),
         l => l.textContent
       );
 
@@ -277,7 +277,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > div > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -310,7 +310,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > div > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -690,11 +690,14 @@ describe("ObjectField", () => {
         schema,
       });
 
-      expect(node.querySelector(".form-group > .btn-danger")).eql(null);
+      expect(
+        node.querySelector(".form-group > .row > .col-xs-2 .btn-danger")
+      ).eql(null);
 
       Simulate.click(node.querySelector(".object-property-expand button"));
 
-      expect(node.querySelector(".form-group > .btn-danger")).to.not.be.null;
+      expect(node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger"))
+        .to.not.be.null;
     });
 
     it("delete button should delete key-value pair", () => {
@@ -703,7 +706,9 @@ describe("ObjectField", () => {
         formData: { first: 1 },
       });
       expect(node.querySelector("#root_first-key").value).to.eql("first");
-      Simulate.click(node.querySelector(".form-group > .btn-danger"));
+      Simulate.click(
+        node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger")
+      );
       expect(node.querySelector("#root_first-key")).to.not.exist;
     });
 
@@ -712,14 +717,11 @@ describe("ObjectField", () => {
         schema,
         formData: { first: 1, second: 2, third: 3 },
       });
-      expect(node.querySelectorAll(".form-group > .btn-danger").length).to.eql(
-        3
-      );
-      Simulate.click(node.querySelectorAll(".form-group > .btn-danger")[1]);
+      const selector = ".form-group > .row > .col-xs-2 > .btn-danger";
+      expect(node.querySelectorAll(selector).length).to.eql(3);
+      Simulate.click(node.querySelectorAll(selector)[1]);
       expect(node.querySelector("#root_second-key")).to.not.exist;
-      expect(node.querySelectorAll(".form-group > .btn-danger").length).to.eql(
-        2
-      );
+      expect(node.querySelectorAll(selector).length).to.eql(2);
     });
 
     it("deleting content of value input should not delete pair", () => {
diff --git a/test/SchemaField_test.js b/test/SchemaField_test.js
index 714375660a..504e722ce8 100644
--- a/test/SchemaField_test.js
+++ b/test/SchemaField_test.js
@@ -313,7 +313,7 @@ describe("SchemaField", () => {
       submit(node);
 
       const matches = node.querySelectorAll(
-        "form > .form-group > div > div > .error-detail .text-danger"
+        "form > .form-group > div > div > div > .error-detail .text-danger"
       );
       expect(matches).to.have.length.of(1);
       expect(matches[0].textContent).to.eql("container");

From 73cde143be764dbc1d251e27809947d281baea60 Mon Sep 17 00:00:00 2001
From: Mateusz Puczynski <mateusz.puczynski@sap.com>
Date: Thu, 10 Jan 2019 14:43:26 +0100
Subject: [PATCH 15/15] revert changes to .gitignore

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 94b5fd5793..03c1b53ecb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,4 @@ node_modules
 build
 dist
 lib
-yarn.lock
\ No newline at end of file
+yarn.lock