Fix dropdown crashing if option is missing label (#2166)

* fix dropdown crashing if option is missing label * remove empty options instead
Altinn · Jun 18, 2024 · e2af5e7 · e2af5e7
1 parent 6d5d91a
commit e2af5e7
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 50 deletions.
diff --git a/src/features/options/useGetOptions.ts b/src/features/options/useGetOptions.ts
@@ -6,7 +6,7 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { castOptionsToStrings } from 'src/features/options/castOptionsToStrings';
 import { useGetOptionsQuery } from 'src/features/options/useGetOptionsQuery';
 import { useSourceOptions } from 'src/hooks/useSourceOptions';
-import { filterDuplicateOptions } from 'src/utils/options';
+import { filterDuplicateOptions, filterEmptyOptions } from 'src/utils/options';
 import type { IUseLanguage } from 'src/features/language/useLanguage';
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 import type {
@@ -38,6 +38,7 @@ interface Props {
   // Generic props
   node: LayoutNode;
   removeDuplicates?: boolean;
+  removeEmpty?: boolean;
   preselectedOptionIndex?: number;
 
   dataModelBindings?: IDataModelBindingsOptionsSimple | IDataModelBindingsSimple;
@@ -107,6 +108,7 @@ export function useGetOptions(props: Props): OptionsResult {
     optionsId,
     secure,
     removeDuplicates,
+    removeEmpty,
     source,
     mapping,
     queryParameters,
@@ -133,6 +135,9 @@ export function useGetOptions(props: Props): OptionsResult {
     if (draft && removeDuplicates) {
       draft = filterDuplicateOptions(draft);
     }
+    if (draft && removeEmpty) {
+      draft = filterEmptyOptions(draft);
+    }
     if (draft && sortOrder) {
       draft = [...draft].sort(compareOptionAlphabetically(langAsString, sortOrder, selectedLanguage));
     }
@@ -143,6 +148,7 @@ export function useGetOptions(props: Props): OptionsResult {
     langAsString,
     preselectedOptionIndex,
     removeDuplicates,
+    removeEmpty,
     selectedLanguage,
     sortOrder,
     sourceOptions,

diff --git a/src/hooks/useFormattedOptions.tsx b/src/hooks/useFormattedOptions.tsx
diff --git a/src/layout/Dropdown/DropdownComponent.tsx b/src/layout/Dropdown/DropdownComponent.tsx
@@ -26,6 +26,7 @@ export function DropdownComponent({ node, isValid, overrideDisplay }: IDropdownP
     valueType: 'single',
     node,
     removeDuplicates: true,
+    removeEmpty: true,
   });
 
   const changeMessageGenerator = useCallback(
@@ -87,7 +88,7 @@ export function DropdownComponent({ node, isValid, overrideDisplay }: IDropdownP
           <Combobox.Option
             key={option.value}
             value={option.value}
-            description={langAsString(option.description)}
+            description={option.description ? langAsString(option.description) : undefined}
             displayValue={langAsString(option.label)}
           >
             <Lang

diff --git a/src/layout/FileUpload/FileUploadComponent.tsx b/src/layout/FileUpload/FileUploadComponent.tsx
@@ -50,6 +50,8 @@ export function FileUploadComponent({ node }: IFileUploadWithTagProps): React.JS
     ...node.item,
     valueType: 'single',
     node,
+    removeDuplicates: true,
+    removeEmpty: true,
     dataModelBindings: undefined,
   });
 

diff --git a/src/layout/FileUploadWithTag/EditWindowComponent.tsx b/src/layout/FileUploadWithTag/EditWindowComponent.tsx
@@ -175,7 +175,7 @@ export function EditWindowComponent({ attachment, mobileView, node, options }: E
                 <Combobox.Option
                   key={option.value}
                   value={option.value}
-                  description={langAsString(option.description)}
+                  description={option.description ? langAsString(option.description) : undefined}
                   displayValue={langAsString(option.label)}
                 >
                   <Lang

diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -22,6 +22,7 @@ export function MultipleSelectComponent({ node, isValid, overrideDisplay }: IMul
     valueType: 'multi',
     node,
     removeDuplicates: true,
+    removeEmpty: true,
   });
   const { langAsString, lang } = useLanguage();
 
@@ -86,7 +87,7 @@ export function MultipleSelectComponent({ node, isValid, overrideDisplay }: IMul
           <Combobox.Option
             key={option.value}
             value={option.value}
-            description={langAsString(option.description)}
+            description={option.description ? langAsString(option.description) : undefined}
             displayValue={langAsString(option.label)}
           >
             <Lang

diff --git a/src/utils/options.ts b/src/utils/options.ts
@@ -15,3 +15,18 @@ export function filterDuplicateOptions(options: IOptionInternal[]): IOptionInter
   }
   return out;
 }
+
+/**
+ * Fast method for filtering options with empty value or label
+ */
+export function filterEmptyOptions(options: IOptionInternal[]): IOptionInternal[] {
+  const out: IOptionInternal[] = [];
+  let j = 0;
+  for (let i = 0; i < options.length; i++) {
+    if (!options[i].value?.length || !options[i].label?.length) {
+      continue;
+    }
+    out[j++] = options[i];
+  }
+  return out;
+}