From bb54ac3cabea278729b60e8a343ad7d4a8c7be5f Mon Sep 17 00:00:00 2001
From: Tony Valle <tony@devotta.no>
Date: Wed, 13 Sep 2023 19:38:38 +0200
Subject: [PATCH] fix: apply `withKeyboardNavigation` before exporting
 `SelectionBoxes`

---
 .../capture-ui/BooleanField/BooleanField.component.js      | 5 +----
 .../capture-ui/SelectionBoxes/SelectionBoxes.component.js  | 5 ++++-
 .../capture-ui/TrueOnlyField/TrueOnlyField.component.js    | 7 ++-----
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/core_modules/capture-ui/BooleanField/BooleanField.component.js b/src/core_modules/capture-ui/BooleanField/BooleanField.component.js
index 97679e8742..4aa7d933e3 100644
--- a/src/core_modules/capture-ui/BooleanField/BooleanField.component.js
+++ b/src/core_modules/capture-ui/BooleanField/BooleanField.component.js
@@ -3,9 +3,6 @@ import React, { Component } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { SelectionBoxes } from '../SelectionBoxes/SelectionBoxes.component';
 import type { OptionRendererInputData } from '../internal/SelectionBoxes/selectBoxes.types';
-import { withKeyboardNavigation } from '../HOC/withKeyboardNavigation';
-
-const SelectionBoxesWrapped = withKeyboardNavigation()(SelectionBoxes);
 
 type Props = {
     allowMultiple?: boolean,
@@ -41,7 +38,7 @@ export class BooleanField extends Component<Props> {
         return (
             <div>
                 {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
-                <SelectionBoxesWrapped
+                <SelectionBoxes
                     options={this.options}
                     multiSelect={allowMultiple}
                     {...passOnProps}
diff --git a/src/core_modules/capture-ui/SelectionBoxes/SelectionBoxes.component.js b/src/core_modules/capture-ui/SelectionBoxes/SelectionBoxes.component.js
index 5ffa6d5d36..88e916b182 100644
--- a/src/core_modules/capture-ui/SelectionBoxes/SelectionBoxes.component.js
+++ b/src/core_modules/capture-ui/SelectionBoxes/SelectionBoxes.component.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { MultiSelectionsBoxes } from '../internal/SelectionBoxes/MultiSelectionsBoxes/MultiSelectionsBoxes.component';
 import { SingleSelectionBoxes } from '../internal/SelectionBoxes/SingleSelectionBoxes/SingleSelectionBoxes.component';
+import { withKeyboardNavigation } from '../HOC/withKeyboardNavigation';
 
 import { orientations } from '../constants/orientations.const';
 
@@ -10,7 +11,7 @@ type Props = {
     multiSelect?: ?boolean,
 };
 
-export const SelectionBoxes = (props: Props) => {
+const SelectionBoxesPlain = (props: Props) => {
     const { multiSelect, ...passOnProps } = props;
 
     if (multiSelect) {
@@ -31,3 +32,5 @@ export const SelectionBoxes = (props: Props) => {
         />
     );
 };
+
+export const SelectionBoxes = withKeyboardNavigation()(SelectionBoxesPlain);
diff --git a/src/core_modules/capture-ui/TrueOnlyField/TrueOnlyField.component.js b/src/core_modules/capture-ui/TrueOnlyField/TrueOnlyField.component.js
index 5888057a84..7859ed8201 100644
--- a/src/core_modules/capture-ui/TrueOnlyField/TrueOnlyField.component.js
+++ b/src/core_modules/capture-ui/TrueOnlyField/TrueOnlyField.component.js
@@ -4,9 +4,6 @@ import i18n from '@dhis2/d2-i18n';
 import { SelectionBoxes } from '../SelectionBoxes/SelectionBoxes.component';
 import { MultiSelectionCheckedIcon, MultiSelectionUncheckedIcon } from '../Icons';
 import type { OptionRendererInputData } from '../internal/SelectionBoxes/selectBoxes.types';
-import { withKeyboardNavigation } from '../HOC/withKeyboardNavigation';
-
-const SelectionBoxesWrapped = withKeyboardNavigation()(SelectionBoxes);
 
 type Props = {
     useRealTrueValue?: ?boolean, // instead of string as option values
@@ -37,7 +34,7 @@ export class TrueOnlyField extends Component<Props> {
         return (
             <div>
                 {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
-                <SelectionBoxesWrapped
+                <SelectionBoxes
                     options={this.options}
                     {...passOnProps}
                 >
@@ -45,7 +42,7 @@ export class TrueOnlyField extends Component<Props> {
                         (optionData, isSelected) =>
                             (isSelected ? <MultiSelectionCheckedIcon /> : <MultiSelectionUncheckedIcon />)
                     }
-                </SelectionBoxesWrapped>
+                </SelectionBoxes>
             </div>
         );
     }