added uniqueId for input field and its cooresponding label

This commit is contained in:
xifengjin88
2018-02-06 21:05:53 -05:00
committed by Shawn Erquhart
parent fa8003e361
commit 03a16dd603
3 changed files with 13 additions and 37 deletions

View File

@ -1,5 +1,5 @@
import React from 'react';
import { partial } from 'lodash';
import { partial, uniqueId } from 'lodash';
import c from 'classnames';
import { resolveWidget } from 'Lib/registry';
import Widget from './Widget';
@ -27,6 +27,7 @@ export default class EditorControl extends React.Component {
const widgetName = field.get('widget');
const widget = resolveWidget(widgetName);
const fieldName = field.get('name');
const uniqueFieldId = uniqueId();
const metadata = fieldsMetaData && fieldsMetaData.get(fieldName);
const errors = fieldsErrors && fieldsErrors.get(fieldName);
return (
@ -46,7 +47,7 @@ export default class EditorControl extends React.Component {
'nc-controlPane-labelActive': this.state.styleActive,
'nc-controlPane-labelWithError': !!errors,
})}
htmlFor={fieldName}
htmlFor={fieldName + uniqueFieldId}
>
{field.get('label')}
</label>
@ -62,6 +63,7 @@ export default class EditorControl extends React.Component {
classNameLabelActive="nc-controlPane-labelActive"
controlComponent={widget.control}
field={field}
uniqueFieldId={uniqueFieldId}
value={value}
mediaPaths={mediaPaths}
metadata={metadata}

View File

@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ImmutablePropTypes from "react-immutable-proptypes";
import { Map } from 'immutable';
import { uniqueId } from 'lodash';
import ValidationErrorTypes from 'Constants/validationErrorTypes';
const truthy = () => ({ error: false });
@ -183,6 +182,7 @@ export default class Widget extends Component {
setInactiveStyle,
hasActiveStyle,
editorControl,
uniqueFieldId
} = this.props;
return React.createElement(controlComponent, {
field,
@ -195,7 +195,7 @@ export default class Widget extends Component {
onAddAsset,
onRemoveInsertedMedia,
getAsset,
forID: uniqueId(field.get('name')),
forID: field.get('name') + uniqueFieldId,
ref: this.processInnerControlRef,
classNameWrapper,
classNameWidget,