pass onBlur, onFocus handlers into selection and test form library fu…

…nctionality for Selection (#2308)
folio-org · Jun 28, 2024 · b60ef7e · b60ef7e
1 parent 45a57c2
commit b60ef7e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/lib/Selection/Selection.js b/lib/Selection/Selection.js
@@ -5,6 +5,7 @@ import { useCombobox } from 'downshift';
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
 import formField from '../FormField';
+import parseMeta from '../FormField/parseMeta';
 
 import {
   defaultItemToString,
@@ -95,7 +96,9 @@ const Selection = ({
   formatter = DefaultOptionFormatter,
   id,
   inputRef,
+  onBlur,
   onChange,
+  onFocus,
   placeholder,
   label,
   listMaxHeight = '174px',
@@ -297,13 +300,19 @@ const Selection = ({
           })}
           className={getControlClass}
           autoFocus={autofocus}
+          onBlur={onBlur}
+          onFocus={onFocus}
         >
           <span className="sr-only">{formatMessage({ id: 'stripes-components.selection.controlLabel' })}</span>
           {valueLabel}
         </button>
         <div className={css.selectionEndControls}>
           <TextFieldIcon icon="triangle-down" />
         </div>
+        <div role="alert">
+          {warning && <div className={`${formStyles.feedbackWarning}`}>{warning}</div>}
+          {error && <div className={`${formStyles.feedbackError}`}>{error}</div>}
+        </div>
       </div>
       <SelectionOverlay
         {...rest}
@@ -340,8 +349,10 @@ Selection.propTypes = {
   loading: PropTypes.bool,
   loadingMessage: PropTypes.node,
   marginBottom0: PropTypes.bool,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onFilter: PropTypes.func,
+  onFocus: PropTypes.func,
   optionAlignment: PropTypes.string,
   placeholder: PropTypes.node,
   popper: PropTypes.object,

diff --git a/lib/Selection/tests/Selection-ReduxForm-test.js b/lib/Selection/tests/Selection-ReduxForm-test.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { describe, beforeEach, it } from 'mocha';
 import { Field } from 'redux-form';
-import { Selection as SelectionInteractor } from '@folio/stripes-testing';
+import {
+  Selection as SelectionInteractor,
+  Button,
+  TextInput,
+} from '@folio/stripes-testing';
 
 import { mountWithContext } from '../../../tests/helpers';
 import TestForm from '../../../tests/TestForm';
@@ -13,22 +17,43 @@ describe('Selection', () => {
 
   describe('coupled to redux-form', () => {
     beforeEach(async () => {
+      const validate = () => 'there\'s a problem!'
       await mountWithContext(
         <TestForm>
           <Field
             label="testSelection"
             name="testField"
             component={Selection}
             dataOptions={[
-              { value: 'test', label: 'Hello World' }
+              { value: 'test', label: 'Hello World' },
+              { value: 'test2', label: 'Hello World2' }
             ]}
+            validate={validate}
           />
+          <Field component="input" name="testText" />
         </TestForm>
       );
+      await selection.focus();
     });
 
-    it('renders the control', () => {
-      selection.exists();
+    it('renders the control', () => selection.exists());
+
+    it('focuses the button', () => Button({ focused: true }).exists());
+
+    describe('using the control', () => {
+      beforeEach(async () => {
+        await selection.choose('Hello World');
+      });
+
+      it('sets the chosen label in the control field', () => selection.has({ value: 'Select controlHello World' }));
+
+      describe('after using the control', () => {
+        beforeEach(async () => {
+          await TextInput().focus();
+        });
+
+        it('displays redux-form validation', () => selection.has({ error: 'there\'s a problem!' }));
+      });
     });
   });
 });