From 931feac36f32d32c8be17b78b42c3b62350f7937 Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Wed, 1 Nov 2023 16:18:39 +0100
Subject: [PATCH] fix(single select): blur when actually blurring the input

---
 components/select/src/select/input-wrapper.js          |  7 -------
 components/select/src/select/select.js                 |  4 +++-
 .../single-select/features/accepts_blur_cb/index.js    | 10 +++++++++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/select/src/select/input-wrapper.js b/components/select/src/select/input-wrapper.js
index a891659cc7..1943fc744c 100644
--- a/components/select/src/select/input-wrapper.js
+++ b/components/select/src/select/input-wrapper.js
@@ -8,7 +8,6 @@ const InputWrapper = ({
     dataTest,
     onToggle,
     children,
-    tabIndex,
     error,
     warning,
     valid,
@@ -29,7 +28,6 @@ const InputWrapper = ({
         <div
             className={classNames}
             onClick={onToggle}
-            tabIndex={tabIndex}
             ref={inputRef}
             data-test={dataTest}
         >
@@ -97,14 +95,9 @@ const InputWrapper = ({
     )
 }
 
-InputWrapper.defaultProps = {
-    tabIndex: '0',
-}
-
 InputWrapper.propTypes = {
     dataTest: PropTypes.string.isRequired,
     inputRef: PropTypes.object.isRequired,
-    tabIndex: PropTypes.string.isRequired,
     onToggle: PropTypes.func.isRequired,
     children: PropTypes.element,
     className: PropTypes.string,
diff --git a/components/select/src/select/select.js b/components/select/src/select/select.js
index d1d80de126..7626ab9ca2 100644
--- a/components/select/src/select/select.js
+++ b/components/select/src/select/select.js
@@ -182,16 +182,17 @@ export class Select extends Component {
 
         return (
             <div
+                tabIndex={disabled ? '-1' : tabIndex}
                 className={className}
                 ref={this.selectRef}
                 onFocus={this.onFocus}
+                onBlur={this.onOutsideClick}
                 onKeyDown={this.onKeyDown}
                 data-test={dataTest}
             >
                 <InputWrapper
                     onToggle={this.onToggle}
                     inputRef={this.inputRef}
-                    tabIndex={disabled ? '-1' : tabIndex}
                     error={error}
                     warning={warning}
                     valid={valid}
@@ -219,6 +220,7 @@ export class Select extends Component {
 
 Select.defaultProps = {
     dataTest: 'dhis2-uicore-select',
+    tabIndex: '0',
 }
 
 Select.propTypes = {
diff --git a/components/select/src/single-select/features/accepts_blur_cb/index.js b/components/select/src/single-select/features/accepts_blur_cb/index.js
index 1fb3dd106c..5025adedcd 100644
--- a/components/select/src/single-select/features/accepts_blur_cb/index.js
+++ b/components/select/src/single-select/features/accepts_blur_cb/index.js
@@ -1,5 +1,13 @@
 import '../common/index.js'
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then, After } from 'cypress-cucumber-preprocessor/steps'
+
+After(() => {
+    cy.window().then((win) => {
+        win.onChange.reset()
+        win.onFocus.reset()
+        win.onBlur.reset()
+    })
+})
 
 Given('a SingleSelect with onBlur handler is rendered', () => {
     cy.visitStory('SingleSelect', 'With onBlur')