fix(single select): blur when actually blurring the input

dhis2 · Nov 1, 2023 · 931feac · 931feac
1 parent de02caf
commit 931feac
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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')