Form elements that support react-hook-form can now be made read-only (#1696)

The recently integrated form library react-hook-form does not submit disabled inputs, but a behaviour where interaction with an input is not possible and it is still submitted is necessary. This feature implements a readOnly property for all components that support react-hook-form. It is visually indistinguishable from a disabled input but will be submitted when the form is submitted. All form fields use disabled fieldset wrappers to accomplish this goal because react-hook-form only checks the disabled property on the input itself, not any ancestors, and the inputs are still correctly displayed as disabled.

scm-ui/ui-components/src/forms/Radio.tsx

@@ -31,6 +31,10 @@ const StyledRadio = styled.label`
   margin-right: 0.5em;
 `;
 
+const InlineFieldset = styled.fieldset`
+  display: inline-block;
+`;
+
 type BaseProps = {
   label?: string;
   name?: string;
@@ -40,9 +44,10 @@ type BaseProps = {
   helpText?: string;
   defaultChecked?: boolean;
   className?: string;
+  readOnly?: boolean;
 };
 
-const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, ...props }) => {
+const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, readOnly, ...props }) => {
   const renderHelp = () => {
     const helpText = props.helpText;
     if (helpText) {
@@ -71,7 +76,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
   };
 
   return (
-    <>
+    <InlineFieldset disabled={readOnly}>
       {/*
         we have to ignore the next line,
         because jsx label does not the custom disabled attribute
@@ -92,7 +97,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
         {props.label}
         {renderHelp()}
       </StyledRadio>
-    </>
+    </InlineFieldset>
   );
 };