@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -15,56 +15,54 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent } from 'react';
 import React from 'react';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerValueSetCodings } from '../../../utils/choice';
-import ChoiceRadioSingle from './ChoiceRadioSingle';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { QRadioGroup } from '../Item.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   orientation: ChoiceItemOrientation;
 }
 
 function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+  const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
 
-  let valueRadio: string | undefined;
+  let valueRadio: string | null = null;
   if (qrChoiceRadio.answer) {
-    valueRadio = qrChoiceRadio.answer[0].valueCoding?.code;
+    valueRadio = qrChoiceRadio.answer[0].valueCoding?.code ?? null;
   }
 
-  // Get additional rendering extensions
-  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
-
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+  function handleChange(newValue: string) {
     if (codings.length > 0) {
-      const qrAnswer = findInAnswerValueSetCodings(codings, event.target.value);
+      const qrAnswer = findInAnswerValueSetCodings(codings, newValue);
       if (qrAnswer) {
         onQrItemChange({
           ...createEmptyQrItem(qItem),
@@ -74,54 +72,37 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
     }
   }
 
-  const choiceRadio =
-    codings.length > 0 ? (
-      <QRadioGroup
-        row={orientation === ChoiceItemOrientation.Horizontal}
-        name={qItem.text}
-        id={qItem.id}
-        onChange={handleChange}
-        value={valueRadio ?? null}>
-        {codings.map((coding: Coding) => {
-          return (
-            <ChoiceRadioSingle
-              key={coding.code ?? ''}
-              value={coding.code ?? ''}
-              label={coding.display ?? `${coding.code}`}
-              readOnly={readOnly}
-            />
-          );
-        })}
-      </QRadioGroup>
-    ) : serverError ? (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
-        </Typography>
-      </StyledAlert>
-    ) : (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          Unable to fetch options from the questionnaire or launch context
-        </Typography>
-      </StyledAlert>
-    );
-
   if (isRepeated) {
-    return <>{choiceRadio}</>;
+    return (
+      <ChoiceRadioAnswerValueSetFields
+        qItem={qItem}
+        codings={codings}
+        valueRadio={valueRadio}
+        orientation={orientation}
+        readOnly={readOnly}
+        serverError={serverError}
+        onCheckedChange={handleChange}
+      />
+    );
   }
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-value-set-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
-          {choiceRadio}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <ChoiceRadioAnswerValueSetFields
+            qItem={qItem}
+            codings={codings}
+            valueRadio={valueRadio}
+            orientation={orientation}
+            readOnly={readOnly}
+            serverError={serverError}
+            onCheckedChange={handleChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Fragment } from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import type { QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  valueSelect: string;
+  readOnly: boolean;
+  onSelectChange: (newValue: string) => void;
+}
+
+function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsProps) {
+  const { qItem, valueSelect, readOnly, isTabled, onSelectChange } = props;
+
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <Select
+      id={qItem.id}
+      name={qItem.text}
+      value={valueSelect}
+      disabled={readOnly}
+      fullWidth
+      placeholder={entryFormat}
+      label={displayPrompt}
+      endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
+      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+      size="small"
+      onChange={(e) => onSelectChange(e.target.value)}>
+      {qItem.answerOption?.map((option, index) => {
+        if (option['valueCoding']) {
+          return (
+            <MenuItem key={option.valueCoding.code} value={option.valueCoding.code}>
+              {option.valueCoding.display ?? option.valueCoding.code}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <MenuItem key={option.valueString} value={option.valueString}>
+              {option.valueString}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <MenuItem key={option.valueInteger} value={option.valueInteger.toString()}>
+              {option.valueInteger}
+            </MenuItem>
+          );
+        }
+
+        return <Fragment key={index} />;
+      })}
+    </Select>
+  );
+}
+
+export default ChoiceSelectAnswerOptionFields;

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionItem.tsx

@@ -15,12 +15,8 @@
  * limitations under the License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import Grid from '@mui/material/Grid';
-import InputAdornment from '@mui/material/InputAdornment';
-import MenuItem from '@mui/material/MenuItem';
-import type { SelectChangeEvent } from '@mui/material/Select';
-import Select from '@mui/material/Select';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
@@ -30,21 +26,28 @@ import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
@@ -53,14 +56,10 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
     valueSelect = '';
   }
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
-
   // Event handlers
-  function handleChange(e: SelectChangeEvent) {
+  function handleChange(newValue: string) {
     if (qItem.answerOption) {
-      const qrAnswer = findInAnswerOptions(qItem.answerOption, e.target.value);
+      const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
       if (qrAnswer) {
         onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
         return;
@@ -69,62 +68,33 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const choiceSelectAnswerOption = (
-    <Select
-      id={qItem.id}
-      name={qItem.text}
-      value={valueSelect}
-      disabled={readOnly}
-      fullWidth
-      placeholder={entryFormat}
-      label={displayPrompt}
-      endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
-      size="small"
-      onChange={handleChange}>
-      {qItem.answerOption?.map((option, index) => {
-        if (option['valueCoding']) {
-          return (
-            <MenuItem key={option.valueCoding.code} value={option.valueCoding.code}>
-              {option.valueCoding.display ?? option.valueCoding.code}
-            </MenuItem>
-          );
-        }
-
-        if (option['valueString']) {
-          return (
-            <MenuItem key={option.valueString} value={option.valueString}>
-              {option.valueString}
-            </MenuItem>
-          );
-        }
-
-        if (option['valueInteger']) {
-          return (
-            <MenuItem key={option.valueInteger} value={option.valueInteger.toString()}>
-              {option.valueInteger}
-            </MenuItem>
-          );
-        }
-
-        return <Fragment key={index} />;
-      })}
-    </Select>
-  );
-
   if (isRepeated) {
-    return <>{choiceSelectAnswerOption}</>;
+    return (
+      <ChoiceSelectAnswerOptionFields
+        qItem={qItem}
+        valueSelect={valueSelect}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        onSelectChange={handleChange}
+      />
+    );
   }
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-select-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
-          {choiceSelectAnswerOption}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <ChoiceSelectAnswerOptionFields
+            qItem={qItem}
+            valueSelect={valueSelect}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onSelectChange={handleChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import { StandardTextField } from '../Textfield.styles';
+import { StyledAlert } from '../../Alert.styles';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  codings: Coding[];
+  valueCoding: Coding | null;
+  serverError: Error | null;
+  readOnly: boolean;
+  onSelectChange: (newValue: Coding | null) => void;
+}
+
+function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetFieldsProps) {
+  const { qItem, codings, valueCoding, serverError, readOnly, isTabled, onSelectChange } = props;
+
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+
+  if (codings.length > 0) {
+    return (
+      <Autocomplete
+        id={qItem.id}
+        options={codings}
+        getOptionLabel={(option) => `${option.display}`}
+        value={valueCoding ?? null}
+        onChange={(_, newValue) => onSelectChange(newValue)}
+        openOnFocus
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        size="small"
+        disabled={readOnly}
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+            data-test="q-item-choice-dropdown-answer-value-set-field"
+          />
+        )}
+      />
+    );
+  }
+
+  if (serverError) {
+    return (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server
+        </Typography>
+      </StyledAlert>
+    );
+  }
+
+  return (
+    <StyledAlert color="error">
+      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+      <Typography variant="subtitle2">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
+    </StyledAlert>
+  );
+}
+
+export default ChoiceSelectAnswerValueSetFields;

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -15,50 +15,47 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React, { useEffect, useMemo } from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
-  let valueCoding: Coding | undefined;
+  let valueCoding: Coding | null = null;
   if (qrChoiceSelect.answer) {
-    valueCoding = qrChoiceSelect.answer[0].valueCoding;
+    valueCoding = qrChoiceSelect.answer[0].valueCoding ?? null;
   }
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
-
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
@@ -84,7 +81,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
   );
 
   // Event handlers
-  function handleChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+  function handleChange(newValue: Coding | null) {
     if (newValue) {
       onQrItemChange({
         ...createEmptyQrItem(qItem),
@@ -95,67 +92,37 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const choiceSelectAnswerValueSet =
-    codings.length > 0 ? (
-      <Autocomplete
-        id={qItem.id}
-        options={codings}
-        getOptionLabel={(option) => `${option.display}`}
-        value={valueCoding ?? null}
-        onChange={handleChange}
-        openOnFocus
-        autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-        size="small"
-        disabled={readOnly}
-        placeholder={entryFormat}
-        renderInput={(params) => (
-          <StandardTextField
-            isTabled={isTabled}
-            label={displayPrompt}
-            {...params}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {params.InputProps.endAdornment}
-                  {displayUnit}
-                </>
-              )
-            }}
-            data-test="q-item-choice-dropdown-answer-value-set-field"
-          />
-        )}
+  if (isRepeated) {
+    return (
+      <ChoiceSelectAnswerValueSetFields
+        qItem={qItem}
+        codings={codings}
+        valueCoding={valueCoding}
+        serverError={serverError}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        onSelectChange={handleChange}
       />
-    ) : serverError ? (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
-        </Typography>
-      </StyledAlert>
-    ) : (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          Unable to fetch options from the questionnaire or launch context
-        </Typography>
-      </StyledAlert>
     );
-
-  if (isRepeated) {
-    return <>{choiceSelectAnswerValueSet}</>;
   }
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-dropdown-answer-value-set-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
-          {choiceSelectAnswerValueSet}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <ChoiceSelectAnswerValueSetFields
+            qItem={qItem}
+            codings={codings}
+            valueCoding={valueCoding}
+            serverError={serverError}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onSelectChange={handleChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

package/src/components/FormComponents/DateItem/DateItem.tsx

@@ -21,6 +21,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -29,21 +30,22 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import DateField from './DateField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function DateItem(props: DateItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let dateString: string | null = null;
@@ -83,7 +85,7 @@ function DateItem(props: DateItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-date-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DateField
           value={dateDayJs}
           displayPrompt={displayPrompt}