@kenyaemr/esm-patient-registration-app 4.5.3 → 4.5.5

package/src/patient-registration/field/address/tests/address-search-component.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Formik, Form, useFormikContext } from 'formik';
+import { Resources, ResourcesContext } from '../../../../offline.resources';
+import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { useConfig } from '@openmrs/esm-framework';
+import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from '../address-hierarchy.resource';
+import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from './mocks';
+import AddressSearchComponent from '../address-search.component';
+import userEvent from '@testing-library/user-event';
+
+useAddressHierarchy;
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(),
+}));
+
+jest.mock('../address-hierarchy.resource', () => ({
+  ...(jest.requireActual('../address-hierarchy.resource') as jest.Mock),
+  useOrderedAddressHierarchyLevels: jest.fn(),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('../../../patient-registration.resource', () => ({
+  ...(jest.requireActual('../../../../patient-registration.resource') as jest.Mock),
+  useAddressHierarchy: jest.fn(),
+}));
+
+jest.mock('formik', () => ({
+  ...(jest.requireActual('formik') as jest.Mock),
+  useFormikContext: jest.fn(() => ({})),
+}));
+
+const allFields = mockedAddressTemplate.lines
+  .flat()
+  .filter((field) => field.isToken === 'IS_ADDR_TOKEN')
+  .map(({ codeName, displayText }) => ({
+    id: codeName,
+    name: codeName,
+    label: displayText,
+  }));
+const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
+allFields.sort((existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name]);
+
+async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+  await render(
+    <ResourcesContext.Provider value={{ addressTemplate } as Resources}>
+      <Formik initialValues={{}} onSubmit={null}>
+        <Form>
+          <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() } as any}>
+            <AddressSearchComponent addressLayout={allFields} />
+          </PatientRegistrationContext.Provider>
+        </Form>
+      </Formik>
+    </ResourcesContext.Provider>,
+  );
+}
+
+const setFieldValue = jest.fn();
+
+describe('Testing address search bar', () => {
+  beforeEach(() => {
+    cleanup();
+    (useConfig as jest.Mock).mockImplementation(() => ({
+      fieldConfigurations: {
+        address: {
+          useAddressHierarchy: {
+            enabled: true,
+            useQuickSearch: true,
+            searchAddressByLevel: false,
+          },
+        },
+      },
+    }));
+    (useOrderedAddressHierarchyLevels as jest.Mock).mockImplementation(() => ({
+      orderedFields: mockedOrderedFields,
+      isLoadingFieldOrder: false,
+      errorFetchingFieldOrder: null,
+    }));
+    (useFormikContext as jest.Mock).mockImplementation(() => ({
+      setFieldValue,
+    }));
+  });
+
+  it('should render the search bar', () => {
+    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    }));
+    renderAddressHierarchy();
+    const searchbox = screen.getByRole('searchbox');
+    expect(searchbox).toBeInTheDocument();
+    const ul = screen.queryByRole('list');
+    expect(ul).not.toBeInTheDocument();
+  });
+
+  it("should render only the results for the search term matched address' parents", async () => {
+    (useAddressHierarchy as jest.Mock).mockImplementation(() => ({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
+    }));
+    renderAddressHierarchy();
+    const searchString = 'nea';
+    const separator = ' > ';
+    const options: Set<string> = new Set();
+    mockedAddressOptions.forEach((address) => {
+      const values = address.split(separator);
+      values.forEach((val, index) => {
+        if (val.toLowerCase().includes(searchString.toLowerCase())) {
+          options.add(values.slice(0, index + 1).join(separator));
+        }
+      });
+    });
+
+    const addressOptions = [...options];
+    addressOptions.forEach(async (address) => {
+      const optionElement = screen.getByText(address);
+      expect(optionElement).toBeInTheDocument();
+      fireEvent.click(optionElement);
+      const values = address.split(separator);
+      allFields.map(({ name }, index) => {
+        waitFor(() => expect(setFieldValue).toBeCalledWith(`address.${name}`, values?.[index]));
+      });
+    });
+  });
+});

package/src/patient-registration/field/address/tests/mocks.ts

@@ -1,104 +1,98 @@
-export const mockResponse1 = {
-  results: [
-    {
-      value:
-        '<?xml version="1.0" encoding="UTF-8"?> \
-          <org.openmrs.layout.address.AddressTemplate> \
-            <nameMappings class="properties"> \
-                <property name="postalCode" value="Postcode" /> \
-                <property name="address1" value="Address line 1" /> \
-                <property name="address2" value="Address line 2" /> \
-                <property name="country" value="Country" /> \
-                <property name="stateProvince" value="State" /> \
-                <property name="cityVillage" value="City" /> \
-            </nameMappings> \
-            <sizeMappings class="properties"> \
-                <property name="postalCode" value="10" /> \
-                <property name="address2" value="40" /> \
-                <property name="address1" value="40" /> \
-                <property name="country" value="10" /> \
-                <property name="stateProvince" value="10" /> \
-                <property name="cityVillage" value="10" /> \
-            </sizeMappings> \
-            <lineByLineFormat> \
-                <string> address1</string> \
-                <string> address2</string> \
-                <string> cityVillage stateProvince country postalCode</string> \
-            </lineByLineFormat> \
-            <requiredElements /> \
-        </org.openmrs.layout.address.AddressTemplate>',
-    },
-  ],
-};
+import { AddressTemplate } from '../../../patient-registration.types';
 
-export const mockResponse2 = {
-  results: [
-    {
-      value:
-        '<org.openmrs.layout.address.AddressTemplate> \
-          <nameMappings> \
-            <entry> \
-              <string>country</string> \
-              <string>Country</string> \
-            </entry> \
-            <entry> \
-              <string>postalCode</string> \
-              <string>Postcode</string> \
-            </entry> \
-            <entry> \
-              <string>address1</string> \
-              <string>Address line 1</string> \
-            </entry> \
-            <entry> \
-              <string>address2</string> \
-              <string>Address line 2</string> \
-            </entry> \
-            <entry> \
-              <string>stateProvince</string> \
-              <string>State</string> \
-            </entry> \
-            <entry> \
-              <string>cityVillage</string> \
-              <string>City</string> \
-            </entry> \
-          </nameMappings> \
-          <sizeMappings> \
-            <entry> \
-              <string>country</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>countyDistrict</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>address1</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>stateProvince</string> \
-              <string>40</string> \
-            </entry> \
-            <entry> \
-              <string>cityVillage</string> \
-              <string>40</string> \
-            </entry> \
-          </sizeMappings> \
-          <elementDefaults> \
-            <entry> \
-              <string>country</string> \
-              <string>Cambodia</string> \
-            </entry> \
-          </elementDefaults> \
-          <lineByLineFormat> \
-            <string>cityVillage, address1</string> \
-            <string>countyDistrict, stateProvince</string> \
-            <string>country</string> \
-          </lineByLineFormat> \
-          <maxTokens>0</maxTokens> \
-        </org.openmrs.layout.address.AddressTemplate>',
-    },
+export const mockedAddressTemplate: AddressTemplate = {
+  displayName: null,
+  codeName: 'default',
+  country: null,
+  lines: [
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Village',
+        codeName: 'cityVillage',
+        displaySize: '40',
+      },
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: ', ',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Commune',
+        codeName: 'address1',
+        displaySize: '40',
+      },
+    ],
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'District',
+        codeName: 'countyDistrict',
+        displaySize: '40',
+      },
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: ', ',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Province',
+        codeName: 'stateProvince',
+        displaySize: '40',
+      },
+    ],
+    [
+      {
+        isToken: 'IS_NOT_ADDR_TOKEN',
+        displayText: '',
+      },
+      {
+        isToken: 'IS_ADDR_TOKEN',
+        displayText: 'Country',
+        codeName: 'country',
+        displaySize: '40',
+      },
+    ],
   ],
+  lineByLineFormat: ['cityVillage, address1', 'countyDistrict, stateProvince', 'country'],
+  nameMappings: {
+    country: 'Country',
+    countyDistrict: 'District',
+    address1: 'Commune',
+    stateProvince: 'Province',
+    cityVillage: 'Village',
+  },
+  sizeMappings: {
+    country: '40',
+    countyDistrict: '40',
+    address1: '40',
+    stateProvince: '40',
+    cityVillage: '40',
+  },
+  elementDefaults: {
+    country: 'កម្ពុជា (Cambodia)',
+  },
+  elementRegex: null,
+  elementRegexFormats: null,
+  requiredElements: null,
 };
 
 export const mockedOrderedFields = ['country', 'stateProvince', 'cityVillage', 'postalCode', 'address1', 'address2'];
+export const mockedAddressOptions = [
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Ou Thum',
+  'Cambodia > Battambang > Banan > Ta Kream > Andoung Neang',
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Phnum',
+  'Cambodia > Kampong Cham > Chamkar Leu > Ta Prok > Neang Laeung',
+  'Cambodia > Battambang > Thma Koul > Ta Meun > Tumneab',
+  'Cambodia > Banteay Meanchey > Mongkol Borei > Banteay Neang > Banteay Neang',
+  'Cambodia > Banteay Meanchey > Phnum Srok > Spean Sraeng > Mukh Chhneang',
+  'Cambodia > Kampong Cham > Cheung Prey > Phdau Chum > Cham Neang',
+];

package/src/patient-registration/field/dob/dob.component.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Switch, TextInput, Layer } from '@carbon/react';
+import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import styles from '../field.scss';
 import { useConfig } from '@openmrs/esm-framework';
 import { RegistrationConfig } from '../../../config-schema';
+import styles from '../field.scss';
 
 const calcBirthdate = (yearDelta, monthDelta, dateOfBirth) => {
   const { enabled, month, dayOfMonth } = dateOfBirth.useEstimatedDateOfBirth;
@@ -25,9 +25,9 @@ export const DobField: React.FC = () => {
   const { t } = useTranslation();
   const {
     fieldConfigurations: { dateOfBirth },
-  } = useConfig() as RegistrationConfig;
-  const [dobUnknown] = useField('birthdateEstimated');
-  const dobKnown = !dobUnknown.value;
+  } = useConfig<RegistrationConfig>();
+  const allowEstimatedBirthDate = dateOfBirth?.allowEstimatedDateOfBirth;
+  const [{ value: dobUnknown }] = useField('birthdateEstimated');
   const [birthdate, birthdateMeta] = useField('birthdate');
   const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
   const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
@@ -75,17 +75,19 @@ export const DobField: React.FC = () => {
   return (
     <div className={styles.halfWidthInDesktopView}>
       <h4 className={styles.productiveHeading02Light}>{t('birthFieldLabelText', 'Birth')}</h4>
-      <div className={styles.dobField}>
-        <div className={styles.dobContentSwitcherLabel}>
-          <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+      {(allowEstimatedBirthDate || dobUnknown) && (
+        <div className={styles.dobField}>
+          <div className={styles.dobContentSwitcherLabel}>
+            <span className={styles.label01}>{t('dobToggleLabelText', 'Date of Birth Known?')}</span>
+          </div>
+          <ContentSwitcher onChange={onToggle} selectedIndex={dobUnknown ? 1 : 0}>
+            <Switch name="known" text={t('yes', 'Yes')} />
+            <Switch name="unknown" text={t('no', 'No')} />
+          </ContentSwitcher>
         </div>
-        <ContentSwitcher onChange={onToggle}>
-          <Switch name="known" text={t('yes', 'Yes')} />
-          <Switch name="unknown" text={t('no', 'No')} />
-        </ContentSwitcher>
-      </div>
+      )}
       <Layer>
-        {dobKnown ? (
+        {!dobUnknown ? (
           <div className={styles.dobField}>
             <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
               <DatePickerInput
@@ -102,38 +104,40 @@ export const DobField: React.FC = () => {
         ) : (
           <div className={styles.grid}>
             <div className={styles.dobField}>
-              <TextInput
-                id="yearsEstimated"
-                type="number"
-                name={yearsEstimated.name}
-                light
-                onChange={onEstimatedYearsChange}
-                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
-                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
-                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
-                value={yearsEstimated.value}
-                min={0}
-                required
-                {...yearsEstimated}
-                onBlur={updateBirthdate}
-              />
+              <Layer>
+                <TextInput
+                  id="yearsEstimated"
+                  type="number"
+                  name={yearsEstimated.name}
+                  onChange={onEstimatedYearsChange}
+                  labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                  invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                  invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                  value={yearsEstimated.value}
+                  min={0}
+                  required
+                  {...yearsEstimated}
+                  onBlur={updateBirthdate}
+                />
+              </Layer>
             </div>
             <div className={styles.dobField}>
-              <TextInput
-                id="monthsEstimated"
-                type="number"
-                name={monthsEstimated.name}
-                light
-                onChange={onEstimatedMonthsChange}
-                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
-                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
-                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
-                value={monthsEstimated.value}
-                min={0}
-                {...monthsEstimated}
-                required={!yearsEstimateMeta.value}
-                onBlur={updateBirthdate}
-              />
+              <Layer>
+                <TextInput
+                  id="monthsEstimated"
+                  type="number"
+                  name={monthsEstimated.name}
+                  onChange={onEstimatedMonthsChange}
+                  labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                  invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
+                  invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
+                  value={monthsEstimated.value}
+                  min={0}
+                  {...monthsEstimated}
+                  required={!yearsEstimateMeta.value}
+                  onBlur={updateBirthdate}
+                />
+              </Layer>
             </div>
           </div>
         )}

package/src/patient-registration/field/dob/dob.test.tsx

@@ -14,7 +14,12 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     useConfig: jest.fn().mockImplementation(() => ({
-      fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      },
     })),
   };
 });

package/src/patient-registration/field/field.resource.ts

@@ -1,6 +1,6 @@
 import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
-import { ConceptAnswers, ConceptResponse } from '../patient-registration-types';
+import { ConceptAnswers, ConceptResponse } from '../patient-registration.types';
 
 export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';

package/src/patient-registration/field/id/id-field.component.tsx

@@ -11,7 +11,7 @@ import {
   IdentifierSource,
   PatientIdentifierType,
   PatientIdentifierValue,
-} from '../../patient-registration-types';
+} from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
 

package/src/patient-registration/field/id/identifier-selection-overlay.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useEffect, useState, useContext } from 're
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
 import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
-import { FormValues, PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration-types';
+import { FormValues, PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
 import Overlay from '../../ui-components/overlay';
 import { ResourcesContext } from '../../../offline.resources';
 import { PatientRegistrationContext } from '../../patient-registration-context';

package/src/patient-registration/field/name/name-field.component.tsx

@@ -8,6 +8,7 @@ import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from '../field.scss';
 import { RegistrationConfig } from '../../../config-schema';
 
+export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;
 
 function checkNumber(value: string) {
@@ -19,17 +20,26 @@ function checkNumber(value: string) {
 }
 
 export const NameField = () => {
+  const { t } = useTranslation();
+  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
   const {
     fieldConfigurations: {
-      name: { displayCapturePhoto, displayReverseFieldOrder },
+      name: {
+        displayCapturePhoto,
+        allowUnidentifiedPatients,
+        defaultUnknownGivenName,
+        defaultUnknownFamilyName,
+        displayMiddleName,
+        displayReverseFieldOrder,
+      },
     },
-  } = useConfig() as RegistrationConfig;
-  const { t } = useTranslation();
-  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
-  const { fieldConfigurations } = useConfig();
-  const fieldConfigs = fieldConfigurations?.name;
-  const [{ value: unidentified }] = useField('unidentifiedPatient');
-  const nameKnown = !unidentified;
+  } = useConfig<RegistrationConfig>();
+
+  const [{ value: isPatientUnknownValue }, , { setValue: setUnknownPatient }] = useField<string>(
+    `attributes.${unidentifiedPatientAttributeTypeUuid}`,
+  );
+
+  const isPatientUnknown = isPatientUnknownValue === 'true';
 
   const onCapturePhoto = useCallback(
     (dataUri: string, photoDateTime: string) => {
@@ -47,11 +57,11 @@ export const NameField = () => {
     if (e.name === 'known') {
       setFieldValue('givenName', '');
       setFieldValue('familyName', '');
-      setFieldValue('unidentifiedPatient', false);
+      setUnknownPatient('false');
     } else {
-      setFieldValue('givenName', fieldConfigs.defaultUnknownGivenName);
-      setFieldValue('familyName', fieldConfigs.defaultUnknownFamilyName);
-      setFieldValue('unidentifiedPatient', true);
+      setFieldValue('givenName', defaultUnknownGivenName);
+      setFieldValue('familyName', defaultUnknownFamilyName);
+      setUnknownPatient('true');
     }
   };
 
@@ -65,12 +75,11 @@ export const NameField = () => {
     />
   );
 
-  const middleNameField = fieldConfigs.displayMiddleName && (
+  const middleNameField = displayMiddleName && (
     <Input
       id="middleName"
       name="middleName"
       labelText={t('middleNameLabelText', 'Middle Name')}
-      light
       checkWarning={checkNumber}
     />
   );
@@ -98,14 +107,21 @@ export const NameField = () => {
         )}
 
         <div className={styles.nameField}>
-          <div className={styles.dobContentSwitcherLabel}>
-            <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
-          </div>
-          <ContentSwitcher className={styles.contentSwitcher} onChange={toggleNameKnown}>
-            <Switch name="known" text={t('yes', 'Yes')} />
-            <Switch name="unknown" text={t('no', 'No')} />
-          </ContentSwitcher>
-          {nameKnown &&
+          {(allowUnidentifiedPatients || isPatientUnknown) && (
+            <>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                selectedIndex={isPatientUnknown ? 1 : 0}
+                onChange={toggleNameKnown}>
+                <Switch name="known" text={t('yes', 'Yes')} />
+                <Switch name="unknown" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </>
+          )}
+          {!isPatientUnknown &&
             (!displayReverseFieldOrder ? (
               <>
                 {firstNameField}

package/src/patient-registration/field/obs/obs-field.component.tsx

@@ -3,7 +3,7 @@ import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { ConceptResponse } from '../../patient-registration-types';
+import { ConceptResponse } from '../../patient-registration.types';
 import { FieldDefinition, RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
@@ -148,18 +148,19 @@ function CodedObsField({ concept, answerConceptSetUuid, label }: CodedObsFieldPr
           {({ field, form: { touched, errors }, meta }) => {
             if (fieldDefinition?.customConceptAnswers?.length) {
               return (
-                <Select
-                  id={fieldName}
-                  name={fieldName}
-                  labelText={label ?? concept?.display}
-                  light
-                  invalid={errors[fieldName] && touched[fieldName]}
-                  {...field}>
-                  <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
-                  {fieldDefinition?.customConceptAnswers.map((answer) => (
-                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
-                  ))}
-                </Select>
+                <Layer>
+                  <Select
+                    id={fieldName}
+                    name={fieldName}
+                    labelText={label ?? concept?.display}
+                    invalid={errors[fieldName] && touched[fieldName]}
+                    {...field}>
+                    <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
+                    {fieldDefinition?.customConceptAnswers.map((answer) => (
+                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                    ))}
+                  </Select>
+                </Layer>
               );
             }
             return (

package/src/patient-registration/field/person-attributes/coded-attributes.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Layer, Select, SelectItem } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { Input } from '../../input/basic-input/input/input.component';
-import { CodedPersonAttributeConfig } from '../../patient-registration-types';
+import { CodedPersonAttributeConfig } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import { usePersonAttributeType } from './person-attributes.resource';
 import styles from './../field.scss';