fix: #1160 update validation of textareaeditor

packages/elements/src/components/Editor/index.tsx

@@ -13,6 +13,7 @@ export interface EditorProps {
   contentClass?: string
   actions?: Array<string | object>
   dataTest?: string
+  onBlur?: () => void
 }
 
 const defaultActions = [
@@ -42,6 +43,7 @@ export const Editor = ({
   buttonClass = 'pell-button',
   contentClass = 'pell-content',
   dataTest = '',
+  onBlur,
 }: EditorProps) => {
   const containerEl = React.useRef<HTMLDivElement>(null)
 
@@ -76,6 +78,11 @@ export const Editor = ({
   }, [defaultContent])
 
   return (
-    <div ref={containerEl} data-test={dataTest} className={`pell ${hasError && 'pell--is-danger'} ${containerClass}`} />
+    <div
+      onBlur={onBlur}
+      ref={containerEl}
+      data-test={dataTest}
+      className={`pell ${hasError && 'pell--is-danger'} ${containerClass}`}
+    />
   )
 }

packages/elements/src/components/TextAreaEditor/__tests__/__snapshots__/index.tsx.snap

@@ -1,58 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextAreaEditor renderTextAreaEditor should match snapshot 1`] = `
-<div>
-  <div
-    className="field pb-2"
-  >
-    <div
-      className="control"
-    >
-      <label
-        className="label"
-        htmlFor="123"
-      >
-        mockLabel
-      </label>
-      <Component
-        defaultContent="1"
-        hasError={false}
-        onChange={[Function]}
-        placeholder="mockPlaceholder"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TextAreaEditor renderTextAreaEditor should match snapshot 2`] = `
-<div>
-  <div
-    className="field pb-2"
-  >
-    <div
-      className="control"
-    >
-      <label
-        className="label"
-        htmlFor="123"
-      >
-        mockLabel
-      </label>
-      <Component
-        hasError={false}
-        onChange={[Function]}
-        placeholder="mockPlaceholder"
-      />
-    </div>
-  </div>
-</div>
-`;
-
 exports[`TextAreaEditor should match a snapshot 1`] = `
-<Field
-  name="username"
+<ContextProvider
+  value={
+    Object {
+      "dirty": false,
+      "errors": Object {},
+      "getFieldHelpers": [Function],
+      "getFieldMeta": [Function],
+      "getFieldProps": [Function],
+      "handleBlur": [Function],
+      "handleChange": [Function],
+      "handleReset": [Function],
+      "handleSubmit": [Function],
+      "initialErrors": Object {},
+      "initialStatus": undefined,
+      "initialTouched": Object {},
+      "initialValues": Object {},
+      "isSubmitting": false,
+      "isValid": true,
+      "isValidating": false,
+      "registerField": [Function],
+      "resetForm": [Function],
+      "setErrors": [Function],
+      "setFieldError": [Function],
+      "setFieldTouched": [Function],
+      "setFieldValue": [Function],
+      "setFormikState": [Function],
+      "setStatus": [Function],
+      "setSubmitting": [Function],
+      "setTouched": [Function],
+      "setValues": [Function],
+      "status": undefined,
+      "submitCount": 0,
+      "submitForm": [Function],
+      "touched": Object {},
+      "unregisterField": [Function],
+      "validateField": [Function],
+      "validateForm": [Function],
+      "validateOnBlur": true,
+      "validateOnChange": true,
+      "validateOnMount": false,
+      "values": Object {},
+    }
+  }
 >
-  <Component />
-</Field>
+  <Component
+    id="username"
+    labelText="User name"
+    name="username"
+    placeholder="enter your name here"
+  />
+</ContextProvider>
 `;

packages/elements/src/components/TextAreaEditor/__tests__/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import { FieldProps, FieldInputProps, FieldMetaProps } from 'formik'
-import { TextAreaEditor, TextAreaEditorProps, handleTextAreaOnChange, renderTextAreaEditor } from '../index'
+import { FieldInputProps, Formik } from 'formik'
+import { TextAreaEditor, TextAreaEditorProps, handleTextAreaOnChange, handleTextAreaOnBlur } from '../index'
 
 const props: TextAreaEditorProps = {
   id: 'username',
@@ -12,7 +12,13 @@ const props: TextAreaEditorProps = {
 
 describe('TextAreaEditor', () => {
   it('should match a snapshot', () => {
-    expect(shallow(<TextAreaEditor {...props} />)).toMatchSnapshot()
+    expect(
+      shallow(
+        <Formik onSubmit={jest.fn()} initialValues={{}}>
+          {() => <TextAreaEditor {...props} />}
+        </Formik>,
+      ),
+    ).toMatchSnapshot()
   })
   describe('onChange', () => {
     const mockField = {
@@ -25,52 +31,14 @@ describe('TextAreaEditor', () => {
     fn('<div></div>')
     expect(mockField.onChange).toBeCalledWith({ target: { value: '<div></div>', name: '123' } })
   })
-  describe('renderTextAreaEditor', () => {
-    it('should match snapshot', () => {
-      const mockProps = {
-        labelText: 'mockLabel',
-        id: '123',
-        placeholder: 'mockPlaceholder',
-      }
-      const fn = renderTextAreaEditor(mockProps)
-      const mockField = {
-        name: '123',
-        value: '1',
-      } as FieldInputProps<string>
-      const mockMeta = {
-        touched: true,
-        errors: '123',
-        value: '123',
-        initialValue: '123',
-        initialTouched: false,
-        initialError: '',
-      } as FieldMetaProps<string>
-      const component = fn({ field: mockField, meta: mockMeta } as FieldProps<string>)
-      const wrapper = shallow(<div>{component}</div>)
-      expect(wrapper).toMatchSnapshot()
-    })
 
-    it('should match snapshot', () => {
-      const mockProps = {
-        labelText: 'mockLabel',
-        id: '123',
-        placeholder: 'mockPlaceholder',
-      }
-      const fn = renderTextAreaEditor(mockProps)
-      const mockField = {
-        name: '123',
-      } as FieldInputProps<string>
-      const mockMeta = {
-        touched: false,
-        errors: '',
-        value: '123',
-        initialValue: '123',
-        initialTouched: false,
-        initialError: '',
-      } as FieldMetaProps<string>
-      const component = fn({ field: mockField, meta: mockMeta } as FieldProps<string>)
-      const wrapper = shallow(<div>{component}</div>)
-      expect(wrapper).toMatchSnapshot()
+  describe('handleTextAreaOnBlur', () => {
+    it('should call setTouched', () => {
+      const mockHelpers = { setTouched: jest.fn() } as any
+      const spy = jest.spyOn(mockHelpers, 'setTouched')
+      const fn = handleTextAreaOnBlur({ helpers: mockHelpers })
+      fn()
+      expect(spy).toHaveBeenCalledWith(true)
     })
   })
 })

packages/elements/src/components/TextAreaEditor/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Field, FieldInputProps, FieldProps } from 'formik'
+import { FieldInputProps, FieldHelperProps, useField } from 'formik'
 import { checkError } from '../../utils/form'
 import { Editor, EditorProps } from '../Editor'
 
@@ -15,38 +15,45 @@ export type HandleTextAreaOnChangeParams = {
   field: FieldInputProps<string>
 }
 
+export type HandleTextAreaOnBlurParams = {
+  helpers: FieldHelperProps<string>
+}
+
 export const handleTextAreaOnChange = ({ field }: HandleTextAreaOnChangeParams) => (html: string) => {
   field.onChange({ target: { value: html, name: field.name } })
 }
 
-export const renderTextAreaEditor = ({ labelText, id, placeholder, ...restProps }) => ({
-  field,
-  meta,
-}: FieldProps<string>) => {
+export const handleTextAreaOnBlur = ({ helpers }: HandleTextAreaOnBlurParams) => () => {
+  helpers.setTouched(true)
+}
+
+export const TextAreaEditor = ({ name, labelText, placeholder, id, ...restProps }: TextAreaEditorProps) => {
+  const [field, meta, helpers] = useField(name)
+
   const hasError = checkError(meta)
+
   return (
-    <div className="field pb-2">
-      <div className="control">
-        <label className="label" htmlFor={id}>
-          {labelText}
-        </label>
-        <Editor
-          hasError={hasError}
-          placeholder={placeholder}
-          defaultContent={field.value}
-          onChange={handleTextAreaOnChange({ field })}
-          {...restProps}
-        />
-      </div>
-      {hasError && (
-        <div data-test="input-error" className="has-text-danger">
-          {meta.error}
+    <>
+      <div className="field pb-2">
+        <div className="control">
+          <label className="label" htmlFor={id}>
+            {labelText}
+          </label>
+          <Editor
+            hasError={hasError}
+            placeholder={placeholder}
+            defaultContent={field.value}
+            onChange={handleTextAreaOnChange({ field })}
+            onBlur={handleTextAreaOnBlur({ helpers })}
+            {...restProps}
+          />
         </div>
-      )}
-    </div>
+        {hasError && (
+          <div data-test="input-error" className="has-text-danger">
+            {meta.error}
+          </div>
+        )}
+      </div>
+    </>
   )
 }
-
-export const TextAreaEditor = ({ name, labelText, placeholder, id, ...restProps }: TextAreaEditorProps) => (
-  <Field name={name}>{renderTextAreaEditor({ labelText, id, placeholder, ...restProps })}</Field>
-)

packages/web-components/src/scripts/start-search-widget.js

@@ -4,8 +4,9 @@ return (() => {
 
   try {
     const clearPublic = 'rimraf ./public/dist && rimraf ./public/themes'
-    // eslint-disable-next-line max-len
-    const moveHtml = 'mkdir -p ./public && cp ./src/search-widget/client/index.html ./public/ && cp ./src/property-detail/client/detail.html ./public/'
+    const moveHtml =
+      // eslint-disable-next-line max-len
+      'mkdir -p ./public && cp ./src/search-widget/client/index.html ./public/ && cp ./src/property-detail/client/detail.html ./public/'
     // eslint-disable-next-line max-len
     const moveTheme = 'mkdir -p ./public/themes && cp ./src/common/styles/__themes__/themes.js ./public/themes'
     const clientScript =