chore: use element as key for entries

related to bpmn-io/bpmn-js-properties-panel#712

src/components/entries/Checkbox.js

@@ -87,6 +87,7 @@ export default function CheckboxEntry(props) {
       <Checkbox
         disabled={ disabled }
         id={ id }
+        key={ element }
         label={ label }
         onChange={ setValue }
         value={ value } />

src/components/entries/FEEL/Feel.js

@@ -315,6 +315,7 @@ export default function FeelEntry(props) {
         disabled={ disabled }
         feel={ feel }
         id={ id }
+        key={ element }
         label={ label }
         onInput={ onInput }
         example={ props.example }

src/components/entries/NumberField.js

@@ -105,6 +105,7 @@ export default function NumberFieldEntry(props) {
         debounce={ debounce }
         disabled={ disabled }
         id={ id }
+        key={ element }
         label={ label }
         onInput={ setValue }
         max={ max }

src/components/entries/Select.js

@@ -125,6 +125,7 @@ export default function SelectEntry(props) {
       data-entry-id={ id }>
       <Select
         id={ id }
+        key={ element }
         label={ label }
         value={ value }
         onChange={ setValue }

src/components/entries/Simple.js

@@ -53,6 +53,7 @@ export default function Simple(props) {
     <div class="bio-properties-panel-simple">
       <input
         id={ prefixId(id) }
+        key={ element }
         type="text"
         name={ id }
         spellCheck="false"

src/components/entries/TextArea.js

@@ -111,6 +111,7 @@ export default function TextAreaEntry(props) {
       data-entry-id={ id }>
       <TextArea
         id={ id }
+        key={ element }
         label={ label }
         value={ value }
         onInput={ setValue }

src/components/entries/TextField.js

@@ -144,6 +144,7 @@ export default function TextfieldEntry(props) {
         debounce={ debounce }
         disabled={ disabled }
         id={ id }
+        key={ element }
         label={ label }
         onInput={ onInput }
         value={ value } />

test/spec/components/Checkbox.spec.js

@@ -80,6 +80,23 @@ describe('<Checkbox>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createCheckbox({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createCheckbox({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   describe('#isEdited', function() {
 
     it('should NOT be edited', function() {
@@ -282,7 +299,7 @@ describe('<Checkbox>', function() {
 
 // helpers ////////////////////
 
-function createCheckbox(options = {}) {
+function createCheckbox(options = {}, renderFn = render) {
   const {
     element,
     id,
@@ -315,7 +332,7 @@ function createCheckbox(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <ErrorsContext.Provider value={ errorsContext }>
       <EventContext.Provider value={ eventContext }>
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>

test/spec/components/Feel.spec.js

@@ -121,6 +121,23 @@ describe('<FeelField>', function() {
     });
 
 
+    it('should use unique input element on element change', function() {
+
+      // given
+      const result = createFeelField({ element: {}, container });
+
+      const input = domQuery('.bio-properties-panel-input', container);
+
+      // when
+      createFeelField({ element: {}, container }, result.render);
+
+      // then
+      const newInput = domQuery('.bio-properties-panel-input', container);
+
+      expect(newInput).to.not.eql(input);
+    });
+
+
     describe('events', function() {
 
       it('should show entry', function() {
@@ -1401,7 +1418,7 @@ function createFeelField(options = {}) {
 }
 
 
-function createFeelTextArea(options = {}) {
+function createFeelTextArea(options = {}, renderFn = render) {
   const {
     element,
     id,
@@ -1438,7 +1455,7 @@ function createFeelTextArea(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <ErrorsContext.Provider value={ errorsContext }>
       <EventContext.Provider value={ eventContext }>
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>

test/spec/components/NumberField.spec.js

@@ -114,6 +114,23 @@ describe('<NumberField>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createNumberField({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createNumberField({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   describe('#isEdited', function() {
 
     it('should NOT be edited', function() {
@@ -315,7 +332,7 @@ describe('<NumberField>', function() {
 
 // helpers ////////////////////
 
-function createNumberField(options = {}) {
+function createNumberField(options = {}, renderFn = render) {
   const {
     element,
     debounce = fn => fn,
@@ -338,7 +355,7 @@ function createNumberField(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <DescriptionContext.Provider value={ context }>
       <NumberField
         element={ element }

test/spec/components/Select.spec.js

@@ -100,6 +100,23 @@ describe('<Select>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createSelect({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createSelect({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   describe('options', function() {
 
     it('should render option enabled per default', function() {
@@ -364,7 +381,7 @@ describe('<Select>', function() {
 
 // helpers ////////////////////
 
-function createSelect(options = {}) {
+function createSelect(options = {}, renderFn = render) {
   const {
     element,
     id = 'select',
@@ -399,7 +416,7 @@ function createSelect(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <ErrorsContext.Provider value={ errorsContext }>
       <EventContext.Provider value={ eventContext }>
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>

test/spec/components/Simple.spec.js

@@ -57,6 +57,23 @@ describe('<Simple>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createSimple({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createSimple({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   it('should NOT blow up on empty value', function() {
 
     // given
@@ -189,7 +206,7 @@ describe('<Simple>', function() {
 
 // helpers ////////////////////
 
-function createSimple(options = {}) {
+function createSimple(options = {}, renderFn = render) {
   const {
     element,
     id,
@@ -200,7 +217,7 @@ function createSimple(options = {}) {
     container
   } = options;
 
-  return render(
+  return renderFn(
     <Simple
       element={ element }
       id={ id }

test/spec/components/TextArea.spec.js

@@ -93,6 +93,23 @@ describe('<TextArea>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createTextArea({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createTextArea({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   describe('events', function() {
 
     it('should show entry', function() {
@@ -296,7 +313,7 @@ describe('<TextArea>', function() {
 
 // helpers ////////////////////
 
-function createTextArea(options = {}) {
+function createTextArea(options = {}, renderFn = render) {
   const {
     element,
     id,
@@ -333,7 +350,7 @@ function createTextArea(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <ErrorsContext.Provider value={ errorsContext }>
       <EventContext.Provider value={ eventContext }>
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>

test/spec/components/TextField.spec.js

@@ -69,6 +69,23 @@ describe('<TextField>', function() {
   });
 
 
+  it('should use unique input element on element change', function() {
+
+    // given
+    const result = createTextField({ element: {}, container });
+
+    const input = domQuery('.bio-properties-panel-input', container);
+
+    // when
+    createTextField({ element: {}, container }, result.render);
+
+    // then
+    const newInput = domQuery('.bio-properties-panel-input', container);
+
+    expect(newInput).to.not.eql(input);
+  });
+
+
   describe('#isEdited', function() {
 
     it('should NOT be edited', function() {
@@ -411,7 +428,7 @@ describe('<TextField>', function() {
 
 // helpers ////////////////////
 
-function createTextField(options = {}) {
+function createTextField(options = {}, renderFn = render) {
   const {
     element,
     id,
@@ -447,7 +464,7 @@ function createTextField(options = {}) {
     getDescriptionForId
   };
 
-  return render(
+  return renderFn(
     <ErrorsContext.Provider value={ errorsContext }>
       <EventContext.Provider value={ eventContext }>
         <PropertiesPanelContext.Provider value={ propertiesPanelContext }>