Help elements need a predictable ID (rjsf-team#2360)

* Help elements need a predictable ID * Updated help id in semantic-ui theme Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>

Author: bradhugh

packages/core/src/components/fields/SchemaField.js

@@ -85,14 +85,22 @@ function LabelInput(props) {
 }
 
 function Help(props) {
- const { help } = props;
+ const { id, help } = props;
  if (!help) {
  return null;
  }
  if (typeof help === "string") {
- return <p className="help-block">{help}</p>;
+ return (
+ <p id={id} className="help-block">
+ {help}
+ </p>
+ );
  }
- return <div className="help-block">{help}</div>;
+ return (
+ <div id={id} className="help-block">
+ {help}
+ </div>
+ );
 }
 
 function ErrorList(props) {
@@ -316,7 +324,7 @@ function SchemaFieldRender(props) {
  />
  ),
  rawDescription: description,
- help: <Help help={help} />,
+ help: <Help id={id + "__help"} help={help} />,
  rawHelp: typeof help === "string" ? help : undefined,
  errors: <ErrorList errors={errors} />,
  rawErrors: errors,

packages/semantic-ui/src/FieldTemplate/FieldTemplate.js

@@ -31,7 +31,7 @@ function FieldTemplate({
  )}
  </MaybeWrap>
  )}
- <HelpField helpText={rawHelp} id={id} />
+ <HelpField helpText={rawHelp} id={id + "__help"} />
  <RawErrors errors={rawErrors} options={errorOptions} />
  </MaybeWrap>
  </Form.Group>