From b511c7fd25f5ad6f1516e7959724712900353d13 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:55:45 -0600
Subject: [PATCH] fix(select): Forward ref to Select input (#2892)

Adds back ref forwarding to the `<Select>` component. The `ref` is the hidden server input with `focus` and `blur` methods redirecting to the visual input.

Fixes: https://github.com/Workday/canvas-kit/issues/2887

[category:Components]

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
---
 cypress/integration/Select.spec.ts              | 17 +++++++++++++++++
 .../react/select/lib/hooks/useSelectInput.ts    | 17 ++++++++++-------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/cypress/integration/Select.spec.ts b/cypress/integration/Select.spec.ts
index 9933d3a076..be690d796d 100644
--- a/cypress/integration/Select.spec.ts
+++ b/cypress/integration/Select.spec.ts
@@ -421,6 +421,23 @@ describe('Select', () => {
     });
   });
 
+  context.only(`given the "Ref Forwarding" story is rendered`, () => {
+    beforeEach(() => {
+      h.stories.load('Components/Inputs/Select', 'Ref Forwarding');
+    });
+
+    it('should not have any axe errors', () => {
+      cy.checkA11y();
+    });
+
+    context('the select input', () => {
+      it('should receive focus via ref forwarding when the button is clicked', () => {
+        cy.findByRole('button', {name: 'Focus Select'}).click();
+        cy.findByRole('combobox').should('have.focus');
+      });
+    });
+  });
+
   context(`given the "Complex" story is rendered`, () => {
     beforeEach(() => {
       h.stories.load('Components/Inputs/Select', 'Complex');
diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
index 72a6b97d71..b2f70283c9 100644
--- a/modules/react/select/lib/hooks/useSelectInput.ts
+++ b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -33,25 +33,27 @@ export const useSelectInput = composeHooks(
         model.state.targetRef as any as React.Ref<HTMLInputElement>
       );
 
-      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
+      const {localRef: hiddenLocalRef, elementRef: hiddenElementRef} = useLocalRef(
+        ref as React.Ref<HTMLInputElement>
+      );
 
       // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
       // the visible input
       React.useImperativeHandle(
-        elementRef,
+        hiddenElementRef,
         () => {
-          if (localRef.current) {
-            localRef.current.focus = (options?: FocusOptions) => {
+          if (hiddenLocalRef.current) {
+            hiddenLocalRef.current.focus = (options?: FocusOptions) => {
               textInputRef.current!.focus(options);
             };
-            localRef.current.blur = () => {
+            hiddenLocalRef.current.blur = () => {
               textInputRef.current!.blur();
             };
           }
 
-          return localRef.current!;
+          return hiddenLocalRef.current!;
         },
-        [textInputRef, localRef]
+        [textInputRef, hiddenLocalRef]
       );
 
       // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
@@ -172,6 +174,7 @@ export const useSelectInput = composeHooks(
         },
         onChange: handleOnChange,
         autoComplete: 'off',
+        ref: hiddenElementRef,
         // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
         onFocus() {
           textInputRef.current?.focus();