- {buildRemoveListItem(container, property, valuePath, key, index)}
- {buildField(container, property, valuePath, value, key)}
+
+ {buildRemoveListItem(container, property, valuePath, index)}
+ {buildField(container, property, valuePath, value, uniqueId)}
);
@@ -443,19 +616,28 @@ export default function EditDescriptorModelProperties(props) {
const isArray = Property.isArray(property);
const isObject = Property.isObject(property);
const isLeafList = Property.isLeafList(property);
- const fieldKey = [container.id].concat(path);
const isRequired = Property.isRequired(property);
const title = changeCase.titleCase(property.name);
const columnCount = property.properties.length || 1;
const isColumnar = isArray && (Math.round(props.width / columnCount) > 155);
const classNames = {'-is-required': isRequired, '-is-columnar': isColumnar};
+ // create a unique Id for use as react component keys and html element ids
+ // use uid (from ui info) instead of id property (which is not stable)
+ let uniqueId = container.uid;
+ let containerRef = container;
+ while (containerRef.parent) {
+ uniqueId = containerRef.parent.uid + ':' + uniqueId;
+ containerRef = containerRef.parent;
+ }
+ uniqueId += ':' + path.join(':')
+
if (!property.properties && isObject) {
const uiState = DescriptorModelMetaFactory.getModelMetaForType(property.name) || {};
property.properties = uiState.properties;
}
- const hasProperties = _.isArray(property.properties) && property.properties.length;
+ const hasProperties = _isArray(property.properties) && property.properties.length;
const isMissingDescriptorMeta = !hasProperties && !Property.isLeaf(property);
// ensure value is not undefined for non-leaf property types
@@ -464,7 +646,7 @@ export default function EditDescriptorModelProperties(props) {
value = isArray ? [] : {};
}
}
- const valueAsArray = _.isArray(value) ? value : isLeafList && typeof value === 'undefined' ? [] : [value];
+ const valueAsArray = _isArray(value) ? value : isLeafList && typeof value === 'undefined' ? [] : [value];
const isMetaField = property.name === 'meta';
const isCVNFD = property.name === 'constituent-vnfd';
@@ -473,12 +655,16 @@ export default function EditDescriptorModelProperties(props) {
valueAsArray.forEach((value, index) => {
let field;
- const key = fieldKey.slice();
const valuePath = path.slice();
+ // create a unique field Id for use as react component keys and html element ids
+ // notes:
+ // keys only need to be unique on components in the same array
+ // html element ids should be unique with the document (or form)
+ let fieldId = uniqueId;
if (isArray) {
valuePath.push(index);
- key.push(index);
+ fieldId += index;
}
if (isMetaField) {
@@ -490,17 +676,17 @@ export default function EditDescriptorModelProperties(props) {
}
if (isMissingDescriptorMeta) {
- field =
No Descriptor Meta for {property.name};
+ field =
No Descriptor Meta for {property.name};
} else if (property.type === 'choice') {
- field = buildChoice(container, property, valuePath, value, key.join(':'));
+ field = buildChoice(container, property, valuePath, value, fieldId);
} else if (isSimpleListView) {
- field = buildSimpleListItem(container, property, valuePath, value, key, index);
+ field = buildSimpleListItem(container, property, valuePath, value, fieldId, index);
} else if (isLeafList) {
- field = buildLeafListItem(container, property, valuePath, value, key, index);
+ field = buildLeafListItem(container, property, valuePath, value, fieldId, index);
} else if (hasProperties) {
- field = buildElement(container, property, valuePath, value, key.join(':'))
+ field = buildElement(container, property, valuePath, value, fieldId)
} else {
- field = buildField(container, property, valuePath, value, key.join(':'));
+ field = buildField(container, property, valuePath, value, fieldId);
}
function onClickLeaf(property, path, value, event) {
@@ -510,7 +696,7 @@ export default function EditDescriptorModelProperties(props) {
event.preventDefault();
event.stopPropagation();
this.getRoot().uiState.focusedPropertyPath = path.join('.');
- console.log('property selected', path.join('.'));
+ console.debug('property selected', path.join('.'));
ComposerAppActions.propertySelected([path.join('.')]);
}
@@ -518,10 +704,10 @@ export default function EditDescriptorModelProperties(props) {
const isContainerList = isArray && !(isSimpleListView || isLeafList);
fields.push(
-
- {isContainerList ? buildRemoveListItem(container, property, valuePath, fieldKey, index) : null}
+ {isContainerList ? buildRemoveListItem(container, property, valuePath, index) : null}
{field}
);
@@ -550,9 +736,9 @@ export default function EditDescriptorModelProperties(props) {
const onFocus = isLeaf ? event => event.target.classList.add('-is-focused') : false;
return (
-
+
-
);
-
-}
+};