fix(organisationUnit): selected org units update according to input.v…

…alue [skip release] (#493)

* fix: need to make sure selected org units update once the input value updates

* fix: use input value path rather than state selected

src/pages/organisationUnits/form/OrganisationUnitSelector.tsx

@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
 import { Field, NoticeBox, OrganisationUnitTree } from '@dhis2/ui'
 import { IconInfo16 } from '@dhis2/ui-icons'
-import React, { useState } from 'react'
-import { FieldRenderProps, useField } from 'react-final-form'
+import React from 'react'
+import { useField } from 'react-final-form'
 import { useCurrentUserRootOrgUnits } from '../../../lib/user/currentUserStore'
 import classes from './OrganisationUnitSelector.module.css'
 
@@ -16,9 +16,7 @@ export function OrganisationUnitSelector() {
     const userRootOrgUnits = useCurrentUserRootOrgUnits()
     const userRootOrgUnitsIds = userRootOrgUnits.map((unit) => unit.id)
     const userRootOrgUnitsPaths = userRootOrgUnits.map((unit) => unit.path)
-    const [selected, setSelected] = useState<[string] | []>(
-        input.value?.path ? [input.value.path] : []
-    )
+    const selectedPath = input.value?.path ? [input.value.path] : []
 
     const handleChange = (orgUnit: {
         displayName: string
@@ -30,7 +28,6 @@ export function OrganisationUnitSelector() {
             id: orgUnit.id,
             path: orgUnit.path,
         })
-        setSelected([orgUnit.path])
         input.onBlur()
     }
 
@@ -47,10 +44,10 @@ export function OrganisationUnitSelector() {
                             onChange={handleChange}
                             singleSelection
                             roots={userRootOrgUnitsIds}
-                            selected={selected}
+                            selected={selectedPath}
                             initiallyExpanded={[
                                 ...userRootOrgUnitsPaths,
-                                ...selected,
+                                ...selectedPath,
                             ]}
                         />
                     </div>