Help elements need a predictable ID (#2360)

* Help elements need a predictable ID * Updated help id in semantic-ui theme Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>
rjsf-team · May 19, 2021 · 9e119fc · 9e119fc
1 parent effe15d
commit 9e119fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/core/src/components/fields/SchemaField.js b/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,

diff --git a/packages/semantic-ui/src/FieldTemplate/FieldTemplate.js b/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>