Merge pull request #3877 from Sage/FE-3965-filterable-select-in-tab-d…

…oesn-t-close-dropdown-when-it-loses-focus

refactor(multi-select): hide select list on blur

cypress/features/regression/designSystem/simpleSelectEvents.feature

@@ -14,8 +14,8 @@ Feature: Design System Simple Select component
 
   @positive
   Scenario: Check the onChange event by clicking mouse on the select list option
-    Given I click on default Select input
-      And clear all actions in Actions Tab
+    Given clear all actions in Actions Tab
+      And I click on default Select input
     When I click on "first" option on Select list in iframe
     Then onChange action was called in Actions Tab
 

src/components/select/filterable-select/filterable-select.component.js

@@ -379,6 +379,7 @@ const FilterableSelect = React.forwardRef(
       }
 
       isInputFocused.current = false;
+      setOpen(false);
 
       if (onBlur) {
         onBlur(event);

src/components/select/filterable-select/filterable-select.spec.js

@@ -751,6 +751,17 @@ describe("FilterableSelect", () => {
       expect(onBlurFn).toHaveBeenCalled();
     });
 
+    it("then SelectList shouldn't exist", () => {
+      const onBlurFn = jest.fn();
+      const wrapper = renderSelect({ onBlur: onBlurFn, openOnFocus: true });
+
+      wrapper.find("input").simulate("focus");
+      expect(wrapper.find(SelectList).exists()).toBe(true);
+
+      wrapper.find("input").simulate("blur");
+      expect(wrapper.find(SelectList).exists()).toBe(false);
+    });
+
     describe("and there is a mouseDown reported on open list", () => {
       it("then that prop should not be called", () => {
         const onBlurFn = jest.fn();

src/components/select/multi-select/multi-select.component.js

@@ -293,6 +293,7 @@ const MultiSelect = React.forwardRef(
       }
 
       isInputFocused.current = false;
+      setOpenState(false);
 
       if (onBlur) {
         onBlur(event);

src/components/select/multi-select/multi-select.spec.js

@@ -148,6 +148,17 @@ describe("MultiSelect", () => {
       expect(onBlurFn).toHaveBeenCalled();
     });
 
+    it("then SelectList shouldn't exist", () => {
+      const onBlurFn = jest.fn();
+      const wrapper = renderSelect({ onBlur: onBlurFn, openOnFocus: true });
+
+      wrapper.find("input").simulate("focus");
+      expect(wrapper.find(SelectList).exists()).toBe(true);
+
+      wrapper.find("input").simulate("blur");
+      expect(wrapper.find(SelectList).exists()).toBe(false);
+    });
+
     describe("and there is a mouseDown reported on open list", () => {
       it("then that prop should not be called", () => {
         const onBlurFn = jest.fn();
@@ -156,6 +167,7 @@ describe("MultiSelect", () => {
         wrapper.find("input").simulate("focus");
         wrapper.find(Option).first().simulate("mousedown");
         wrapper.find("input").simulate("blur");
+
         expect(onBlurFn).not.toHaveBeenCalled();
       });
     });

src/components/select/simple-select/simple-select.component.js

@@ -251,6 +251,8 @@ const SimpleSelect = React.forwardRef(
         return;
       }
 
+      setOpenState(false);
+
       if (onBlur) {
         onBlur(event);
       }

src/components/select/simple-select/simple-select.spec.js

@@ -680,6 +680,17 @@ describe("SimpleSelect", () => {
       expect(onBlurFn).toHaveBeenCalled();
     });
 
+    it("then SelectList shouldn't exist", () => {
+      const onBlurFn = jest.fn();
+      const wrapper = renderSelect({ onBlur: onBlurFn, openOnFocus: true });
+
+      wrapper.find("input").simulate("focus");
+      expect(wrapper.find(SelectList).exists()).toBe(true);
+
+      wrapper.find("input").simulate("blur");
+      expect(wrapper.find(SelectList).exists()).toBe(false);
+    });
+
     describe("and there is a mouseDown reported on open list", () => {
       it("then that prop should not be called", () => {
         const onBlurFn = jest.fn();