Fix hidden widget in several themes and SelectWidget in bootstrap-4 (#3036)

* Fix hidden widget in several themes and SelectWidget in bootstrap-4
- Updated the `FieldTemplate` in `chakra-ui`, `material-ui`, `mui` and `semantic-ui` to properly implement the hidden field
- Updated `SelectWidget` in `bootstrap-4` to fix missing `htmlFor` and the `disabled` state when `readonly`
- Updated snapshots to verify fixes
- Also removed the `test:update` script from `core`, `utils` and `validator-ajv6` because they are useless

* - Responded to reviewer feedback

Author: heath-freenome

packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx

@@ -41,7 +41,10 @@ const SelectWidget = ({
 
   return (
     <Form.Group>
-      <Form.Label className={rawErrors.length > 0 ? "text-danger" : ""}>
+      <Form.Label
+        className={rawErrors.length > 0 ? "text-danger" : ""}
+        htmlFor={id}
+      >
         {label || schema.title}
         {(label || schema.title) && required ? "*" : null}
       </Form.Label>
@@ -52,8 +55,7 @@ const SelectWidget = ({
         value={typeof value === "undefined" ? emptyValue : value}
         required={required}
         multiple={multiple}
-        disabled={disabled}
-        readOnly={readonly}
+        disabled={disabled || readonly}
         autoFocus={autofocus}
         className={rawErrors.length > 0 ? "is-invalid" : ""}
         onBlur={

packages/bootstrap-4/test/__snapshots__/Array.test.tsx.snap

@@ -515,6 +515,7 @@ exports[`array fields checkboxes 1`] = `
       >
         <label
           className="form-label"
+          htmlFor="root"
         />
         <select
           autoFocus={false}
@@ -525,7 +526,6 @@ exports[`array fields checkboxes 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
-          readOnly={false}
           required={false}
           value={Array []}
         >

packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap

@@ -919,6 +919,7 @@ exports[`single fields select field 1`] = `
       >
         <label
           className="form-label"
+          htmlFor="root"
         />
         <select
           autoFocus={false}
@@ -928,7 +929,6 @@ exports[`single fields select field 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
-          readOnly={false}
           value=""
         >
           <option

packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx

@@ -33,7 +33,7 @@ const FieldTemplate = (props: FieldTemplateProps) => {
   } = props;
 
   if (hidden) {
-    return <>{children}</>;
+    return <div style={{ display: "none" }}>{children}</div>;
   }
 
   return (

packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap

@@ -1242,11 +1242,19 @@ exports[`single fields hidden field 1`] = `
       <div
         className="emotion-1"
       >
-        <input
-          id="root_my-field"
-          type="hidden"
-          value=""
-        />
+        <div
+          style={
+            Object {
+              "display": "none",
+            }
+          }
+        >
+          <input
+            id="root_my-field"
+            type="hidden"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </div>

packages/core/package.json

@@ -12,7 +12,6 @@
     "start": "dts watch",
     "test": "dts test",
     "test:watch": "dts test --watch",
-    "test:update": "dts test --u",
     "test-coverage": "dts test --coverage"
   },
   "lint-staged": {

packages/material-ui/src/FieldTemplate/FieldTemplate.tsx

@@ -27,7 +27,7 @@ const FieldTemplate = ({
   registry,
 }: FieldTemplateProps) => {
   if (hidden) {
-    return children;
+    return <div style={{ display: "none" }}>{children}</div>;
   }
   return (
     <WrapIfAdditional

packages/material-ui/test/__snapshots__/Form.test.tsx.snap

@@ -899,11 +899,19 @@ exports[`single fields hidden field 1`] = `
           }
         }
       >
-        <input
-          id="root_my-field"
-          type="hidden"
-          value=""
-        />
+        <div
+          style={
+            Object {
+              "display": "none",
+            }
+          }
+        >
+          <input
+            id="root_my-field"
+            type="hidden"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </div>

packages/mui/src/FieldTemplate/FieldTemplate.tsx

@@ -27,7 +27,7 @@ const FieldTemplate = ({
   registry,
 }: FieldTemplateProps) => {
   if (hidden) {
-    return children;
+    return <div style={{ display: "none" }}>{children}</div>;
   }
   return (
     <WrapIfAdditional

packages/mui/test/__snapshots__/Form.test.tsx.snap

@@ -3815,11 +3815,19 @@ exports[`single fields hidden field 1`] = `
           }
         }
       >
-        <input
-          id="root_my-field"
-          type="hidden"
-          value=""
-        />
+        <div
+          style={
+            Object {
+              "display": "none",
+            }
+          }
+        >
+          <input
+            id="root_my-field"
+            type="hidden"
+            value=""
+          />
+        </div>
       </div>
     </div>
   </div>

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

@@ -33,7 +33,7 @@ function FieldTemplate({
   );
 
   if (hidden) {
-    return children;
+    return <div style={{ display: "none" }}>{children}</div>;
   }
 
   return (

packages/semantic-ui/test/__snapshots__/Form.test.js.snap

@@ -684,11 +684,19 @@ exports[`single fields hidden field 1`] = `
       className="grouped equal width fields"
     >
       
-      <input
-        id="root_my-field"
-        type="hidden"
-        value=""
-      />
+      <div
+        style={
+          Object {
+            "display": "none",
+          }
+        }
+      >
+        <input
+          id="root_my-field"
+          type="hidden"
+          value=""
+        />
+      </div>
     </div>
   </div>
   <button

packages/utils/package.json

@@ -18,8 +18,7 @@
     "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
     "lint": "eslint src test",
     "precommit": "lint-staged",
-    "test": "dts test",
-    "test:update": "dts test --u"
+    "test": "dts test"
   },
   "lint-staged": {
     "{src,test}/**/*.ts?(x)": [

packages/validator-ajv6/package.json

@@ -19,8 +19,7 @@
     "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
     "lint": "eslint src test",
     "precommit": "lint-staged",
-    "test": "dts test",
-    "test:update": "dts test --u"
+    "test": "dts test"
   },
   "lint-staged": {
     "{src,test}/**/*.ts?(x)": [