Merge branch 'development'

Author: JT501

.gitignore

@@ -25,5 +25,8 @@ yarn-error.log*
 # IDE
 /.idea
 /.run/
+
+# Example
 /example/dist/
 /example/node_modules/
+/example/yarn.lock

README.md

@@ -83,7 +83,7 @@ yarn add formik-semantic-ui-react
 | Form | [FormProps](https://react.semantic-ui.com/collections/form/) |
 | Field | [FieldProps](#FieldProps) |
 | FormikDebug | CSS Style Props |
-| Input | [FieldProps](#FieldProps) & [InputProps](https://react.semantic-ui.com/elements/input/) & [FieldErrorProps](#FieldErrorProps) |
+| Input | [FieldProps](#FieldProps) & [InputProps](https://react.semantic-ui.com/elements/input/) & [FieldErrorProps](#FieldErrorProps) & `inputLabel` |
 | Radio | [FieldProps](#FieldProps) & [RadioProps](https://react.semantic-ui.com/addons/radio/) & [FieldErrorProps](#FieldErrorProps) |
 | Select | [FieldProps](#FieldProps) & [SelectProps](https://react.semantic-ui.com/addons/select/) & [FieldErrorProps](#FieldErrorProps) |
 | TextArea | [FieldProps](#FieldProps) & [TextAreaProps](https://react.semantic-ui.com/addons/text-area/) & [FieldErrorProps](#FieldErrorProps) |

example/index.tsx

@@ -2,7 +2,7 @@ import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Formik } from 'formik';
-import { Form, FormikDebug, Input, SubmitButton } from '../src';
+import { Checkbox, Form, Input, ResetButton, SubmitButton } from '../src';
 import 'semantic-ui-css/semantic.min.css';
 import styled from 'styled-components';
 import * as Yup from 'yup';
@@ -23,13 +23,15 @@ const App = () => {
   const initialValues = {
     email: '',
     password: '',
+    remember: false,
   };
 
   const validationSchema = Yup.object({
     email: Yup.string().email('Invalid email address').required('Required'),
     password: Yup.string()
       .min(8, 'Must be at least 8 characters')
       .required('Required'),
+    remember: Yup.boolean().required('Required').oneOf([true], 'Required'),
   });
 
   return (
@@ -41,30 +43,36 @@ const App = () => {
           onSubmit={(values, { setSubmitting }) => {
             setTimeout(() => setSubmitting(false), 1000);
           }}
+          onReset={() => console.log('YO')}
         >
           <Form size="large">
             <Input
-              inputLabel={{ color: 'orange', content: 'email' }}
+              id="input-email"
+              inputLabel={{ color: 'orange', children: 'email' }}
               name="email"
               placeholder="Email"
-              focus
               fluid
               errorPrompt
             />
             <Input
+              id="input-password"
               inputLabel={{ color: 'violet', content: 'password' }}
               name="password"
               type="password"
               placeholder="Password"
               autoComplete="on"
-              focus
               fluid
               errorPrompt
             />
-            <SubmitButton primary fluid>
-              Login
-            </SubmitButton>
-            <FormikDebug />
+            <Checkbox
+              id="checkbox-remember"
+              name="remember"
+              label="Remember ?"
+              errorPrompt
+            />
+            <SubmitButton primary fluid content="Login" />
+            <ResetButton secondary fluid content="Reset" />
+            {/*<FormikDebug />*/}
           </Form>
         </Formik>
       </Wrapper>

example/package.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
+    "@types/yup": "^0.29.9",
     "parcel": "^1.12.3",
     "typescript": "^3.4.5"
   }

package.json

@@ -96,6 +96,7 @@
     "@types/jest": "^26.0.15",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
+    "@types/yup": "^0.29.9",
     "eslint-plugin-prettier": "^3.1.4",
     "formik": "^2.2.1",
     "husky": "^4.3.0",
@@ -110,7 +111,8 @@
     "ts-jest": "^26.4.3",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.0.5"
+    "typescript": "^4.0.5",
+    "yup": "^0.29.3"
   },
   "dependencies": {}
 }

src/Input.tsx

@@ -1,25 +1,36 @@
 import React, { forwardRef, Ref } from 'react';
-import { FieldMetaProps, FieldProps as FormikFieldProps } from 'formik';
+import {
+  FieldMetaProps,
+  FieldProps as FormikFieldProps,
+  isObject,
+  isString,
+} from 'formik';
 import {
   FormField,
   Input as _Input,
   InputOnChangeData,
   InputProps as _InputProps,
   Label,
+  LabelProps,
+  SemanticShorthandItem,
 } from 'semantic-ui-react';
 import { FieldErrorProps, FieldProps } from './types';
 import Field from './Field';
+import { RESET_BUTTON_ID } from './ResetButton';
+import { SUBMIT_BUTTON_ID } from './SubmitButton';
 
 export interface InputProps extends FieldProps, _InputProps, FieldErrorProps {
-  inputLabel?: string;
+  inputLabel?: SemanticShorthandItem<LabelProps>;
 }
 
 export const Input = (
   {
+    id,
     name,
     validate,
     fast,
     onChange: _onChange,
+    onBlur: _onBlur,
     errorPrompt,
     errorConfig,
     label,
@@ -28,13 +39,25 @@ export const Input = (
   }: InputProps,
   ref: Ref<_Input>,
 ) => {
+  const fieldLabelId = (id && label && `${id}-field-label`) || undefined;
+  const inputLabelId = (id && inputLabel && `${id}-input-label`) || undefined;
+
+  const fieldLabel = label && (
+    <label id={fieldLabelId} htmlFor={id}>
+      {label}
+    </label>
+  );
+
   const errorLabel = (error: string | undefined) => (
     <Label
+      id={id ? `${id}-error-message` : undefined}
+      role="alert"
+      aria-atomic
+      content={error}
       prompt={errorConfig?.prompt ?? true}
       basic={errorConfig?.basic}
       pointing={errorConfig?.pointing ?? true}
       color={errorConfig?.color}
-      content={error}
     />
   );
 
@@ -57,27 +80,52 @@ export const Input = (
   return (
     <Field name={name} validate={validate} fast={fast}>
       {({ field: { value, onChange, onBlur }, meta }: FormikFieldProps) => (
-        <FormField
-          ref={ref}
-          name={name}
-          value={value}
-          onChange={(
-            event: React.ChangeEvent<HTMLInputElement>,
-            data: InputOnChangeData,
-          ) => {
-            onChange(event);
-            _onChange && _onChange(event, data);
-          }}
-          onBlur={onBlur}
-          error={meta.touched && meta.error}
-        >
-          {label && <Label>{label}</Label>}
+        <FormField error={meta.touched && !!meta.error}>
+          {fieldLabel}
           {errorLabelBefore(meta)}
           <_Input
+            id={id}
+            ref={ref}
             name={name}
-            label={inputLabel}
+            value={value}
+            label={
+              (isString(inputLabel) && {
+                children: inputLabel,
+                htmlFor: id,
+                id: inputLabelId,
+              }) ||
+              (isObject(inputLabel) && {
+                ...(inputLabel as object),
+                htmlFor: id,
+                id: inputLabelId,
+              })
+            }
+            onChange={(
+              event: React.ChangeEvent<HTMLInputElement>,
+              data: InputOnChangeData,
+            ) => {
+              onChange(event);
+              _onChange && _onChange(event, data);
+            }}
+            onBlur={(event: FocusEvent) => {
+              if (event.relatedTarget instanceof Element) {
+                /*
+                  Skip validation onBlur when reset / submit button is clicked or
+                  It will block reset / submit button onClick event
+                */
+                if (
+                  event.relatedTarget.id === RESET_BUTTON_ID ||
+                  event.relatedTarget.id === SUBMIT_BUTTON_ID
+                ) {
+                  return;
+                }
+              }
+              onBlur(event);
+            }}
+            aria-describedby={id && !!meta.error ? `${id}-error-message` : null}
+            aria-invalid={!!meta.error ? true : undefined}
+            aria-labelledby={`${fieldLabelId ?? ''} ${inputLabelId ?? ''}`}
             {...restProps}
-            defaultValue={value}
           />
           {errorLabelAfter(meta)}
         </FormField>

src/ResetButton.tsx

@@ -2,10 +2,20 @@ import React from 'react';
 import { ButtonProps, FormButton } from 'semantic-ui-react';
 import { useFormikContext } from 'formik';
 
-export const ResetButton = (props: ButtonProps) => {
+export const RESET_BUTTON_ID = 'formik-semantic-ui-react-reset-button';
+
+export const ResetButton = ({ onClick, ...restProps }: ButtonProps) => {
   const formContext = useFormikContext();
   return (
-    <FormButton {...props} type="button" onClick={formContext.handleReset} />
+    <FormButton
+      id={RESET_BUTTON_ID}
+      type="button"
+      onClick={(event, data) => {
+        formContext.resetForm();
+        onClick && onClick(event, data);
+      }}
+      {...restProps}
+    />
   );
 };
 

src/SubmitButton.tsx

@@ -6,6 +6,8 @@ interface Props {
   disableLoading?: boolean;
 }
 
+export const SUBMIT_BUTTON_ID = 'formik-semantic-ui-react-submit-button';
+
 export const SubmitButton = ({
   disableLoading,
   loading,
@@ -14,6 +16,7 @@ export const SubmitButton = ({
   const context = useFormikContext();
   return (
     <FormButton
+      id={SUBMIT_BUTTON_ID}
       type="submit"
       loading={
         disableLoading

test/Input.test.tsx

@@ -1,40 +1,70 @@
 import { Formik } from 'formik';
 import React from 'react';
-import { Form, Input } from '../src';
+import { Form, Input, ResetButton, SubmitButton } from '../src';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { LabelProps, SemanticShorthandItem } from 'semantic-ui-react';
+import * as Yup from 'yup';
 
 interface Props {
   label?: string;
+  inputLabel?: SemanticShorthandItem<LabelProps>;
   value: string;
   validate?: any;
+  validationSchema?: any;
 }
 
-const Container = ({ label, value, validate }: Props) => {
+const Container = ({
+  label,
+  inputLabel,
+  value,
+  validate,
+  validationSchema,
+}: Props) => {
   return (
-    <Formik initialValues={{ field: value }} onSubmit={() => {}}>
+    <Formik
+      initialValues={{ field: value }}
+      validationSchema={validationSchema}
+      onSubmit={() => {}}
+    >
       <Form>
         <Input
+          id="input-test"
           data-testid="input"
           name="field"
           label={label}
+          inputLabel={inputLabel}
           validate={validate}
+          errorPrompt
         />
+        <SubmitButton content="Submit" />
+        <ResetButton content="Reset" />
       </Form>
     </Formik>
   );
 };
 
 describe('Input', () => {
   it('should render Input component', async function () {
-    const { getByTestId, getByText, getByRole } = render(
+    const { getByTestId, getByText, getByRole, getByLabelText } = render(
       <Container label="Testing" value="value" />,
     );
     expect(getByTestId('input')).toBeInTheDocument();
+    // Get input element by label text
+    expect(getByLabelText('Testing')).toBeInTheDocument();
     expect(getByRole('textbox')).toHaveValue('value');
     expect(getByText('Testing')).toBeInTheDocument();
   });
 
+  it('should render Input label', function () {
+    const { getByLabelText, getByText } = render(
+      <Container inputLabel={'Testing'} value={''} />,
+    );
+    expect(getByText('Testing')).toBeInTheDocument();
+    // Get input element by label text
+    expect(getByLabelText('Testing')).toBeInTheDocument();
+  });
+
   it('should change value', async function () {
     const { getByRole } = render(<Container value="" />);
     expect(getByRole('textbox')).toHaveValue('');
@@ -48,4 +78,27 @@ describe('Input', () => {
     await userEvent.type(getByRole('textbox'), 'new value');
     await waitFor(() => expect(validate).toBeCalledTimes('new value'.length));
   });
+
+  it('should reset value after reset button is clicked', async function () {
+    const { getByRole } = render(<Container value={''} />);
+    expect(getByRole('textbox')).toHaveValue('');
+    await userEvent.type(getByRole('textbox'), 'new value');
+    await waitFor(() => expect(getByRole('textbox')).toHaveValue('new value'));
+    await userEvent.click(getByRole('button', { name: 'Reset' }));
+    await waitFor(() => expect(getByRole('textbox')).toHaveValue(''));
+  });
+
+  it('should show error prompt if input is invalid', async function () {
+    const validationSchema = Yup.object({
+      field: Yup.string().required('Required'),
+    });
+    const { getByRole } = render(
+      <Container value={''} validationSchema={validationSchema} />,
+    );
+    expect(getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    await userEvent.click(getByRole('button', { name: 'Submit' }));
+    await waitFor(() =>
+      expect(getByRole('alert')).toHaveTextContent('Required'),
+    );
+  });
 });