fix/ O3-2253:Marking a field as readonly should render the field control as opposed to switching to view mode

src/components/inputs/date/ohri-date.component.tsx

@@ -132,7 +132,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
     }
   }, [field.value, time]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <OHRIFieldValueView
       label={question.label}
       value={field.value instanceof Date ? getDisplay(field.value, question.questionOptions.rendering) : field.value}
@@ -170,6 +170,7 @@ const OHRIDate: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
                 invalidText={errors[0]?.message}
                 warn={warnings.length > 0}
                 warnText={warnings[0]?.message}
+                readOnly={question.readonly}
               />
             </DatePicker>
           </div>

src/components/inputs/location/ohri-encounter-location.component.tsx

@@ -36,7 +36,7 @@ export const OHRIEncounterLocationPicker: React.FC<{ question: OHRIFormField; on
     });
   }, [conceptName]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView
         label={question.label}
@@ -59,6 +59,7 @@ export const OHRIEncounterLocationPicker: React.FC<{ question: OHRIFormField; on
             setFieldValue(question.id, selectedItem);
             setEncounterLocation(selectedItem);
           }}
+          readOnly={question.readonly}
           disabled={question.disabled}
         />
       </div>

src/components/inputs/multi-select/ohri-multi-select.component.tsx

@@ -78,7 +78,7 @@ export const OHRIMultiSelect: React.FC<OHRIFormFieldProps> = ({ question, onChan
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView
         label={question.label}
@@ -111,6 +111,7 @@ export const OHRIMultiSelect: React.FC<OHRIFormFieldProps> = ({ question, onChan
             invalidText={errors[0]?.message}
             warn={warnings.length > 0}
             warnText={warnings[0]?.message}
+            readOnly={question.readonly}
           />
         </div>
         <div className={styles.formField} style={{ marginTop: '0.125rem' }}>

src/components/inputs/number/ohri-number.component.tsx

@@ -70,7 +70,7 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView
         label={question.label}
@@ -99,6 +99,7 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
             hideSteppers={true}
             onWheel={e => e.target.blur()}
             disabled={question.disabled}
+            readOnly={question.readonly}
             className={isFieldRequiredError ? styles.errorLabel : ''}
             warn={warnings.length > 0}
             warnText={warnings[0]?.message}

src/components/inputs/select/ohri-dropdown.component.tsx

@@ -65,7 +65,7 @@ const OHRIDropdown: React.FC<OHRIFormFieldProps> = ({ question, onChange, handle
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <OHRIFieldValueView
       label={question.label}
       value={field.value ? handler?.getDisplayValue(question, field.value) : field.value}
@@ -87,6 +87,7 @@ const OHRIDropdown: React.FC<OHRIFormFieldProps> = ({ question, onChange, handle
             selectedItem={field.value}
             onChange={({ selectedItem }) => handleChange(selectedItem)}
             disabled={question.disabled}
+            readOnly={question.readonly}
             invalid={!isFieldRequiredError && errors.length > 0}
             invalidText={errors.length && errors[0].message}
             warn={warnings.length > 0}

src/components/inputs/text-area/ohri-text-area.component.tsx

@@ -48,7 +48,7 @@ const OHRITextArea: React.FC<OHRIFormFieldProps> = ({ question, onChange, handle
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView label={question.label} value={field.value} conceptName={conceptName} isInline={isInline} />
     </div>
@@ -68,6 +68,7 @@ const OHRITextArea: React.FC<OHRIFormFieldProps> = ({ question, onChange, handle
             onFocus={() => setPreviousValue(field.value)}
             rows={question.questionOptions.rows || 4}
             disabled={question.disabled}
+            readOnly={question.readonly}
             invalid={!isFieldRequiredError && errors.length > 0}
             invalidText={errors.length && errors[0].message}
             warn={warnings.length > 0}

src/components/inputs/text/ohri-text.component.tsx

@@ -66,7 +66,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView label={question.label} value={field.value} conceptName={conceptName} isInline={isInline} />
     </div>
@@ -86,6 +86,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler })
               value={field.value || ''}
               onFocus={() => setPreviousValue(field.value)}
               disabled={question.disabled}
+              readOnly={question.readonly}
               invalid={!isFieldRequiredError && errors.length > 0}
               invalidText={errors.length && errors[0].message}
               warn={warnings.length > 0}

src/components/inputs/toggle/ohri-toggle.component.tsx

@@ -40,7 +40,7 @@ const OHRIToggle: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
     return false;
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView
         label={question.label}
@@ -60,6 +60,7 @@ const OHRIToggle: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler
           onToggle={handleChange}
           toggled={!!field.value}
           disabled={question.disabled}
+          readOnly={question.readonly}
         />
       </div>
     )

src/components/inputs/ui-select-extended/ui-select-extended.tsx

@@ -90,7 +90,7 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
     }
     return changes;
   };
-  return encounterContext.sessionMode == 'view' || isTrue(question.readonly) ? (
+  return encounterContext.sessionMode == 'view' ? (
     <div className={styles.formField}>
       <OHRIFieldValueView
         label={question.label}
@@ -130,6 +130,7 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
               }}
               onChange={({ selectedItem }) => handleChange(selectedItem?.uuid)}
               disabled={question.disabled}
+              readOnly={question.readonly}
               onInputChange={value => {
                 inputValue.current = value;
                 if (question.questionOptions['isSearchable']) {