fix(FormInput): Forwards ref properly (microsoft#13839)

* feat(FormField): Add error message, error indicator and satisfactory indicator * feat(FormField): Add satisfactoryIndicator to proptypes * feat(FormField): contidion to satisfactory Indicator * feat(FormField): add desc to prop * feat(FormField):fix proptype * feat(FormField): fix message ID * feat(FormField): add aria required * feat(FormField): add error examples * feat(FormField): add tests * feat(FormField): add children api * feat(FormField): add children api * feat(FormField): reduce example * feat(FormField): remove comment * feat(FormField): rename satisfactoryIndicator * feat(FormField): update ids * feat(FormField): replace labelledby * feat(FormField): use controlId * feat(FormField): use id for label * feat(FormField): add best practice * feat(FormField): aria-labelledby in the input * feat(FormField):error to hasIcon * feat(FormField): simplify * feat(FormField): Fix text * feat(FormComponents): add components * feat(FormField): rename * feat(FormField): rename * feat(FormField): rename * feat(FormComponents): add components * feat(FormComponents): add button * feat(FormComponents): remove coments * feat(FormComponents): slot props * feat(FormComponents): fix label * feat(FormComponents): Fix tests * feat(FormComponents): Fix tests * feat(FormComponents): Fix checkbox Label * feat(FormComponents): Fix import * feat(FormComponents): Add FormFieldCustom * feat(FormComponents): remove unused prop from checkbox form * feat(FormComponents): add form slider and form radio group * feat(FormComponents): form slider class * feat(FormComponents): fix handled props * feat(FormComponents): remove checkboxLabel * feat(FormPrototype): add form prototype validation * feat(FormPrototype): remove mode * feat(FormPrototype): inputRef type * feat(FormPrototype): inputRer type * feat(FormPrototype): small fixes * feat(FormComponents): remove control * feat(FormComponents): review * feat(FormComponents): Update example * feat(FormComponents): revert formFieldStyles * feat(FormComponents): fix props input * feat(FormComponents): remove type from styles * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> * feat(FormComponents): update class name * feat(FormComponents): revert formfield test * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> * feat(FormComponents): Variants Section * feat(FormComponents): revert removing control * feat(FormComponents): remove default prop * Update packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com> * Update packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com> * feat(FormComponents): review * feat(FormPrototype): handle dropdown onBlur * feat(FormPrototype): Validation on blur dropdown * feat(FormPrototype): Refact FormFieldBase * feat(FormPrototype): add FormFieldCustom * feat(FormPrototype): change file name * feat(FormPrototype): remove children * feat(FormComponents): review * feat(FormComponents): review * feat(FormComponents): review * feat(FormPrototype): required * feat(FormPrototype): error to message in dropdown * feat(FormPrototype): Fix formik * feat(FormPrototype): Fix onBlur * feat(FormPrototype): Fix onBlur * feat(FormPrototype): Fix lock * feat(FormPrototype): Fix validation * feat(FormPrototype): hotfix * feat(FormPrototype): remove import * feat(FormPrototype): remove flat from packagejson * feat(FormPrototype): remove condition using watch * feat(FormPrototype): update * feat(FormPrototype): change ref * fix(FormInput): foward ref properly * Update packages/fluentui/react-northstar/src/components/Input/Input.tsx * fix(FormPrototype): fix tests * fix(FormPrototype): fix tests Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com> Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
pompomon · Jun 29, 2020 · 038a8f2 · 038a8f2
1 parent 30ab262
commit 038a8f2
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 15 deletions.
diff --git a/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx b/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx
@@ -89,7 +89,6 @@ const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
       <ElementType
         {...getA11yProps('root', {
           className: classes.root,
-          ref,
         })}
       >
         {createShorthand(composeOptions.slots.label, label, {
@@ -104,6 +103,7 @@ const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
           defaultProps: () =>
             getA11yProps('control', {
               error: !!errorMessage || null,
+              ref,
               ...unhandledProps,
               ...slotProps.control,
             }),

diff --git a/packages/fluentui/react-northstar/src/components/Input/Input.tsx b/packages/fluentui/react-northstar/src/components/Input/Input.tsx
@@ -263,6 +263,7 @@ const Input = compose<'div', InputProps, InputStylesProps, {}, {}>(
                 innerRef={(inputElement: HTMLElement) => {
                   handleRef(inputRef, inputElement);
                   handleRef(props.inputRef, inputElement);
+                  handleRef(ref, inputElement);
                 }}
               >
                 {createShorthand(composeOptions.slots.control, input || type, {
@@ -274,7 +275,6 @@ const Input = compose<'div', InputProps, InputStylesProps, {}, {}>(
                       type,
                       required,
                       value: value || '',
-                      ref,
                       className: inputSlotClassNames.input,
                       styles: resolvedStyles.input,
                       onChange: handleChange,

diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
@@ -43,7 +43,7 @@ export interface Conformant {
   /** Child component that will receive unhandledProps. */
   passesUnhandledPropsTo?: ComponentType<any>;
   /** Child component that will receive ref. */
-  forwardsRefTo?: string;
+  forwardsRefTo?: string | boolean;
 }
 
 /**
@@ -695,19 +695,20 @@ export default function isConformant(
           expect(getComponent(wrapper).prop('className')).toContain('has-test');
         });
       });
+      if (forwardsRefTo !== false) {
+        it('passes a ref to "root" element', () => {
+          const ComposedComponent = compose(Component as ComposedComponent);
+          const rootRef = jest.fn();
 
-      it('passes a ref to "root" element', () => {
-        const ComposedComponent = compose(Component as ComposedComponent);
-        const rootRef = jest.fn();
+          const wrapper = forwardsRefTo
+            ? mount(<ComposedComponent {...requiredProps} ref={rootRef} />).find(forwardsRefTo as string)
+            : mount(<ComposedComponent {...requiredProps} ref={rootRef} />);
 
-        const wrapper = forwardsRefTo
-          ? mount(<ComposedComponent {...requiredProps} ref={rootRef} />).find(forwardsRefTo)
-          : mount(<ComposedComponent {...requiredProps} ref={rootRef} />);
-        const element = getComponent(wrapper);
-
-        expect(typeof element.type()).toBe('string');
-        expect(rootRef).toBeCalledWith(expect.objectContaining({ tagName: _.upperCase(element.type()) }));
-      });
+          const element = getComponent(wrapper);
+          expect(typeof element.type()).toBe('string');
+          expect(rootRef).toBeCalledWith(expect.objectContaining({ tagName: _.upperCase(element.type()) }));
+        });
+      }
     });
   }
 }
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormButton-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormButton-test.tsx
@@ -5,6 +5,7 @@ import Button from 'src/components/Button/Button';
 describe('FormButton', () => {
   isConformant(FormButton, {
     constructorName: 'FormButton',
+    forwardsRefTo: `Button`,
     passesUnhandledPropsTo: Button,
   });
 });
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormCheckbox-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormCheckbox-test.tsx
@@ -5,6 +5,8 @@ import Checkbox from 'src/components/Checkbox/Checkbox';
 describe('FormCheckbox', () => {
   isConformant(FormCheckbox, {
     constructorName: 'FormCheckbox',
+    // TODO: point to correct once Checkbox will be using compose
+    forwardsRefTo: false,
     passesUnhandledPropsTo: Checkbox,
   });
 });
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormDropdown-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormDropdown-test.tsx
@@ -5,6 +5,7 @@ import Dropdown from 'src/components/Dropdown/Dropdown';
 describe('FormDropdown', () => {
   isConformant(FormDropdown, {
     constructorName: 'FormDropdown',
+    forwardsRefTo: false,
     passesUnhandledPropsTo: Dropdown,
   });
 });
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormInput-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormInput-test.tsx
@@ -1,11 +1,12 @@
 import { isConformant } from 'test/specs/commonTests';
 import FormInput from 'src/components/Form/FormInput';
-import Input from 'src/components/Input/Input';
+import Input, { inputSlotClassNames } from 'src/components/Input/Input';
 
 describe('FormInput', () => {
   isConformant(FormInput, {
     constructorName: 'FormInput',
     passesUnhandledPropsTo: Input,
+    forwardsRefTo: `Box[className~="${inputSlotClassNames.input}"]`,
     eventTargets: {
       onKeyDown: 'input',
       onChange: 'input',

diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormRadioGroup-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormRadioGroup-test.tsx
@@ -5,6 +5,8 @@ import RadioGroup from 'src/components/RadioGroup/RadioGroup';
 describe('FormRadioGroup', () => {
   isConformant(FormRadioGroup, {
     constructorName: 'FormRadioGroup',
+    // TODO: point to correct once RadioGroup will be using compose
+    forwardsRefTo: false,
     passesUnhandledPropsTo: RadioGroup,
   });
 });
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormSlider-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormSlider-test.tsx
@@ -6,6 +6,8 @@ describe('FormSlider', () => {
   isConformant(FormSlider, {
     constructorName: 'FormSlider',
     passesUnhandledPropsTo: Slider,
+    // TODO: point to correct once Slider will be using compose
+    forwardsRefTo: false,
     eventTargets: {
       onChange: 'input',
       onKeyDown: 'input',