fix: Define stable ref reference in useComboboxInputConstrained (Workday#3145)

Create a stable reference to the form element ref in `useComboboxInputConstrained`.

React during the lifecycle will sometimes set the ref to `null`.  By setting it to a variable we create a stable reference.

[category:Components]

Co-authored-by: manuel.carrera <[email protected]>

Author: mannycarrera4

cypress/component/Examples.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import {TextInputWithReactHookForm} from '@workday/canvas-kit-preview-react/_examples/stories/mdx/examples/TextInputWithReactHookForm';
+
+describe('TextInputWithReactHookForm', () => {
+  context('given inputs using React Hook Form', () => {
+    beforeEach(() => {
+      cy.mount(<TextInputWithReactHookForm />);
+    });
+
+    it('should not have any axe errors', () => {
+      cy.checkA11y();
+    });
+  });
+});

modules/preview-react/_examples/stories/mdx/Forms.mdx modules/preview-react/_examples/stories/mdx/FormLibraryExample.mdx

@@ -1,9 +1,9 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import {TextInputWithReactHookForm} from './examples/TextInputWithReactHookForm';
+import * as FormStories from './FormLibraryExample.stories';
 
-<Meta title="Examples/Preview/Forms" />
+<Meta of={FormStories} />
 
-# Canvas Kit Forms Examples
 
 ## Uncontrolled Text Inputs Using React Hook Form
 

modules/preview-react/_examples/stories/mdx/FormLibraryExample.stories.ts

@@ -0,0 +1,12 @@
+import {Meta} from '@storybook/react';
+
+import {TextInputWithReactHookForm as TextInputWithReactHookFormExample} from './examples/TextInputWithReactHookForm';
+
+export default {
+  title: 'Examples/Forms',
+  parameters: {},
+} as Meta;
+
+export const TextInputWithReactHookForm = {
+  render: TextInputWithReactHookFormExample,
+};

modules/react/combobox/lib/hooks/useComboboxInputConstrained.ts

@@ -63,19 +63,20 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
       formElementRef,
       () => {
         if (formLocalRef.current) {
+          const formElementRefStable = formLocalRef.current;
           // Hook into the DOM `value` property of the form input element and update the model
           // accordingly
-          Object.defineProperty(formLocalRef.current, 'value', {
+          Object.defineProperty(formElementRefStable, 'value', {
             get() {
               const value = Object.getOwnPropertyDescriptor(
-                Object.getPrototypeOf(formLocalRef.current),
+                Object.getPrototypeOf(formElementRefStable),
                 'value'
-              )?.get?.call(formLocalRef.current);
+              )?.get?.call(formElementRefStable);
               return value;
             },
             set(value: string) {
               if (
-                formLocalRef.current &&
+                formElementRefStable &&
                 value !==
                   (modelStateRef.current.selectedIds === 'all'
                     ? []
@@ -88,10 +89,10 @@ export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)
           });
 
           // forward calls to `.focus()` and `.blur()` to the user input
-          formLocalRef.current.focus = (options?: FocusOptions) => {
+          formElementRefStable.focus = (options?: FocusOptions) => {
             userLocalRef.current!.focus(options);
           };
-          formLocalRef.current.blur = () => {
+          formElementRefStable.blur = () => {
             userLocalRef.current!.blur();
           };
         }