fix(filterable-select): ensure list does not reopen when user clicks option and openOnFocus prop set

cypress/components/select/filterable-select/filterable-select.cy.tsx

@@ -576,6 +576,34 @@ context("Tests for FilterableSelect component", () => {
       selectListWrapper().should("be.visible");
     });
 
+    it("should not reopen list when openOnFocus set and user selects an option via click", () => {
+      CypressMountWithProviders(
+        <stories.FilterableSelectComponent openOnFocus />
+      );
+
+      commonDataElementInputPreview().focus();
+      selectInput().should("have.attr", "aria-expanded", "true");
+      selectListWrapper().should("be.visible");
+      selectOption(positionOfElement("first")).click();
+      selectListWrapper().should("not.be.visible");
+    });
+
+    it("should open list when openOnFocus set, user selects an option via enter key and then input is blurred then focussed again", () => {
+      CypressMountWithProviders(
+        <stories.FilterableSelectComponent openOnFocus />
+      );
+
+      commonDataElementInputPreview().focus();
+      selectInput().should("have.attr", "aria-expanded", "true");
+      selectListWrapper().should("be.visible");
+      selectInput().realPress("ArrowDown");
+      selectInput().realPress("Enter");
+      selectListWrapper().should("not.be.visible");
+      commonDataElementInputPreview().blur();
+      commonDataElementInputPreview().focus();
+      selectListWrapper().should("be.visible");
+    });
+
     it("should check list is open when input is clicked and openOnFocus is set", () => {
       CypressMountWithProviders(
         <stories.FilterableSelectComponent openOnFocus />

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

@@ -153,6 +153,7 @@ export const FilterableSelect = React.forwardRef(
       label,
     });
     const focusTimer = useRef<null | ReturnType<typeof setTimeout>>(null);
+    const openOnFocusFlagBlock = useRef(false);
 
     if (!deprecateInputRefWarnTriggered && inputRef) {
       deprecateInputRefWarnTriggered = true;
@@ -478,12 +479,14 @@ export const FilterableSelect = React.forwardRef(
         setActiveDescendantId(selectedOptionId);
 
         if (selectionType !== "navigationKey") {
+          openOnFocusFlagBlock.current = !!openOnFocus;
           setOpen(false);
           textboxRef?.focus();
           textboxRef?.select();
+          openOnFocusFlagBlock.current = false;
         }
       },
-      [textboxRef, triggerChange]
+      [textboxRef, triggerChange, openOnFocus]
     );
 
     const onSelectListClose = useCallback(() => {
@@ -521,6 +524,10 @@ export const FilterableSelect = React.forwardRef(
           clearTimeout(focusTimer.current);
         }
 
+        if (openOnFocusFlagBlock.current) {
+          return;
+        }
+
         // we need to use a timeout here as there is a race condition when rendered in a modal
         // whereby the select list isn't visible when the select is auto focused straight away
         focusTimer.current = setTimeout(() => {

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

@@ -36,8 +36,8 @@ function getSelect(props: Partial<FilterableSelectProps> = {}) {
   );
 }
 
-function renderSelect(props = {}, renderer = mount) {
-  return renderer(getSelect(props));
+function renderSelect(props = {}, renderer = mount, opts = {}) {
+  return renderer(getSelect(props), opts);
 }
 
 describe("FilterableSelect", () => {
@@ -1097,7 +1097,7 @@ describe("FilterableSelect", () => {
 
   describe('when the "openOnFocus" prop is set', () => {
     describe("and the Textbox Input is focused", () => {
-      it("the SelectList should be rendered", () => {
+      it("should render the SelectList", () => {
         const wrapper = renderSelect({ openOnFocus: true });
 
         act(() => {
@@ -1109,6 +1109,38 @@ describe("FilterableSelect", () => {
           .forEach((option) => expect(option.getDOMNode()).toBeVisible());
       });
 
+      it("should not reopen the SelectList when a user selects and Option by clicking", () => {
+        const container = document.createElement("div");
+        container.id = "enzymeContainer";
+        document.body.appendChild(container);
+
+        const wrapper = renderSelect({ openOnFocus: true }, mount, {
+          attachTo: document.getElementById("enzymeContainer"),
+        });
+
+        act(() => {
+          wrapper.find("input").simulate("focus");
+          jest.runOnlyPendingTimers();
+        });
+        wrapper
+          .find(Option)
+          .forEach((option) => expect(option.getDOMNode()).toBeVisible());
+        act(() => {
+          wrapper.find(SelectList).prop("onSelect")({
+            value: "opt1",
+            text: "red",
+            selectionType: "click",
+            selectionConfirmed: true,
+          });
+        });
+        wrapper
+          .update()
+          .find(Option)
+          .forEach((option) => expect(option.getDOMNode()).not.toBeVisible());
+
+        container?.parentNode?.removeChild(container);
+      });
+
       describe.each(["readOnly", "disabled"])(
         'with the "%s" prop passed',
         (prop) => {