fix(searchable single selects): add posibility to deselect

src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx

@@ -1,22 +1,20 @@
 import i18n from '@dhis2/d2-i18n'
 import React, { forwardRef } from 'react'
 import { ModelSingleSelect } from '../ModelSingleSelect'
+import type { ModelSingleSelectProps } from '../ModelSingleSelect'
 import { useInitialOptionQuery } from './useInitialOptionQuery'
 import { useOptionsQuery } from './useOptionsQuery'
 
-interface CategoryComboSelectProps {
-    onChange: ({ selected }: { selected: string }) => void
-    placeholder?: string
-    selected?: string
-    showAllOption?: boolean
-    onBlur?: () => void
-    onFocus?: () => void
-}
+type CategoryComboSelectProps = Omit<
+    ModelSingleSelectProps,
+    'useInitialOptionQuery' | 'useOptionsQuery'
+>
 
 export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
     {
         onChange,
         placeholder = i18n.t('Category combo'),
+        required,
         selected,
         showAllOption,
         onBlur,
@@ -27,6 +25,7 @@ export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
     return (
         <ModelSingleSelect
             ref={ref}
+            required={required}
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}

src/components/metadataFormControls/CategoryComboSelect/useOptionsQuery.ts

@@ -62,7 +62,11 @@ export function useOptionsQuery() {
                     const { id, displayName, isDefault } = catCombo
                     return {
                         value: id,
-                        label: isDefault ? i18n.t('None') : displayName,
+                        // This should be distinguishable from other selects
+                        // where "none" means no selection
+                        label: isDefault
+                            ? i18n.t('Default (none)')
+                            : displayName,
                     }
                 }) || []),
             ])

src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx

@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import React, {
     forwardRef,
     useCallback,
@@ -12,10 +13,12 @@ import { SearchableSingleSelect } from '../../SearchableSingleSelect'
 function computeDisplayOptions({
     selected,
     selectedOption,
+    required,
     options,
 }: {
     options: SelectOption[]
     selected?: string
+    required?: boolean
     selectedOption?: SelectOption
 }): SelectOption[] {
     // This happens only when we haven't fetched the lable for an initially
@@ -29,11 +32,16 @@ function computeDisplayOptions({
         ({ value }) => value === selected
     )
 
-    if (selectedOption && !optionsContainSelected) {
-        return [...options, selectedOption]
+    const withSelectedOption =
+        selectedOption && !optionsContainSelected
+            ? [...options, selectedOption]
+            : options
+
+    if (!required) {
+        return [{ value: '', label: i18n.t('None') }, ...withSelectedOption]
     }
 
-    return options
+    return withSelectedOption
 }
 
 type UseInitialOptionQuery = ({
@@ -44,8 +52,9 @@ type UseInitialOptionQuery = ({
     selected?: string
 }) => QueryResponse
 
-interface ModelSingleSelectProps {
+export interface ModelSingleSelectProps {
     onChange: ({ selected }: { selected: string }) => void
+    required?: boolean
     placeholder?: string
     selected?: string
     showAllOption?: boolean
@@ -55,14 +64,11 @@ interface ModelSingleSelectProps {
     useOptionsQuery: () => QueryResponse
 }
 
-export interface ModelSingleSelectHandle {
-    refetch: () => void
-}
-
 export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
     {
         onChange,
         placeholder = '',
+        required,
         selected,
         showAllOption,
         onBlur,
@@ -134,6 +140,7 @@ export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
     const displayOptions = computeDisplayOptions({
         selected,
         selectedOption,
+        required,
         options: result,
     })
 

src/components/metadataFormControls/ModelSingleSelect/index.ts

@@ -1 +1 @@
-export { ModelSingleSelect } from './ModelSingleSelect'
+export * from './ModelSingleSelect'

src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx

@@ -1,22 +1,20 @@
 import i18n from '@dhis2/d2-i18n'
 import React, { forwardRef } from 'react'
 import { ModelSingleSelect } from '../ModelSingleSelect'
+import type { ModelSingleSelectProps } from '../ModelSingleSelect'
 import { useInitialOptionQuery } from './useInitialOptionQuery'
 import { useOptionsQuery } from './useOptionsQuery'
 
-interface OptionSetSelectProps {
-    onChange: ({ selected }: { selected: string }) => void
-    placeholder?: string
-    selected?: string
-    showAllOption?: boolean
-    onBlur?: () => void
-    onFocus?: () => void
-}
+type OptionSetSelectProps = Omit<
+    ModelSingleSelectProps,
+    'useInitialOptionQuery' | 'useOptionsQuery'
+>
 
 export const OptionSetSelect = forwardRef(function OptionSetSelect(
     {
         onChange,
         placeholder = i18n.t('Option set'),
+        required,
         selected,
         showAllOption,
         onBlur,
@@ -27,6 +25,7 @@ export const OptionSetSelect = forwardRef(function OptionSetSelect(
     return (
         <ModelSingleSelect
             ref={ref}
+            required={required}
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}

src/pages/dataElements/New.tsx

@@ -113,7 +113,6 @@ export const Component = () => {
                 variables: payload,
             })
         } catch (e) {
-            console.log('> e', e)
             return { [FORM_ERROR]: (e as Error | string).toString() }
         }
 

src/pages/dataElements/form/CustomAttributes.tsx

@@ -64,9 +64,8 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
         )
     }
 
-    throw new Error(
-        `@TODO(CustomAttributes): Implement value type "${attribute.valueType}"!`
-    )
+    // @TODO: Verify that all value types have been covered!
+    throw new Error(`Implement value type "${attribute.valueType}"!`)
 }
 
 export function CustomAttributes({

src/pages/dataElements/form/customFields.tsx

@@ -251,6 +251,7 @@ export function CategoryComboField() {
                     validationText={meta.error}
                 >
                     <CategoryComboSelect
+                        required
                         placeholder=""
                         ref={categoryComboHandle}
                         selected={input.value}