diff --git a/src/frontend/components/property-type/default-type/edit.tsx b/src/frontend/components/property-type/default-type/edit.tsx
index e3ee6f3ea..5af79f697 100644
--- a/src/frontend/components/property-type/default-type/edit.tsx
+++ b/src/frontend/components/property-type/default-type/edit.tsx
@@ -1,81 +1,75 @@
-import React, { ReactNode } from 'react'
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React, { FC, useState, memo, useEffect } from 'react'
 import Select from 'react-select'
 import { withTheme, DefaultTheme } from 'styled-components'
 import { Input, FormMessage, FormGroup, Label, selectStyles } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import usePrevious from '../../../utils/usePrevious'
 
 type CombinedProps = EditPropertyProps & {theme: DefaultTheme}
 
-class Edit extends React.Component<CombinedProps> {
-  constructor(props) {
-    super(props)
-    this.handleInputChange = this.handleInputChange.bind(this)
-    this.handleSelectChange = this.handleSelectChange.bind(this)
-  }
-
-  shouldComponentUpdate(prevProps: CombinedProps): boolean {
-    return !recordPropertyIsEqual(prevProps, this.props)
-  }
+const Edit: FC<CombinedProps> = (props) => {
+  const { property, record } = props
+  const error = record.errors?.[property.name]
+  return (
+    <FormGroup error={Boolean(error)}>
+      <Label
+        htmlFor={property.name}
+        required={property.isRequired}
+      >
+        {property.label}
+      </Label>
+      {property.availableValues ? <SelectEdit {...props} /> : <TextEdit {...props} />}
+      <FormMessage>{error && error.message}</FormMessage>
+    </FormGroup>
+  )
+}
 
-  handleInputChange(event): void {
-    const { onChange, property } = this.props
-    onChange(property.name, event.target.value)
+const SelectEdit: FC<CombinedProps> = (props) => {
+  const { theme, record, property, onChange } = props
+  if (!property.availableValues) {
+    return null
   }
+  const propValue = record.params?.[property.name] ?? ''
+  const styles = selectStyles(theme)
+  const selected = property.availableValues.find(av => av.value === propValue)
+  return (
+    <Select
+      isClearable
+      styles={styles}
+      value={selected}
+      options={property.availableValues}
+      onChange={s => onChange(property.name, s?.value ?? '')}
+      isDisabled={property.isDisabled}
+    />
+  )
+}
 
-  handleSelectChange(selected): void {
-    const { onChange, property } = this.props
-    const value = selected ? selected.value : ''
-    onChange(property.name, value)
-  }
+const TextEdit: FC<CombinedProps> = (props) => {
+  const { property, record, onChange } = props
+  const propValue = record.params?.[property.name] ?? ''
+  const [value, setValue] = useState(propValue)
 
-  renderInput(): ReactNode {
-    const { property, record, theme } = this.props
-    const value = (record.params && typeof record.params[property.name] !== 'undefined')
-      ? record.params[property.name]
-      : ''
-    if (property.availableValues) {
-      const styles = selectStyles(theme)
-      const selected = property.availableValues.find(av => av.value === value)
-      return (
-        <Select
-          isClearable
-          styles={styles}
-          value={selected}
-          options={property.availableValues}
-          onChange={this.handleSelectChange}
-          isDisabled={property.isDisabled}
-        />
-      )
+  const previous = usePrevious(propValue)
+  useEffect(() => {
+    // this means props updated
+    if (propValue !== previous) {
+      setValue(propValue)
     }
-    return (
-      <Input
-        id={property.name}
-        name={property.name}
-        onChange={this.handleInputChange}
-        value={value}
-        disabled={property.isDisabled}
-      />
-    )
-  }
+  }, [])
 
-  render(): ReactNode {
-    const { property, record } = this.props
-    const error = record.errors && record.errors[property.name]
-    return (
-      <FormGroup error={!!error}>
-        <Label
-          htmlFor={property.name}
-          required={property.isRequired}
-        >
-          {property.label}
-        </Label>
-        {this.renderInput()}
-        <FormMessage>{error && error.message}</FormMessage>
-      </FormGroup>
-    )
-  }
+  return (
+    <Input
+      id={property.name}
+      name={property.name}
+      onChange={e => setValue(e.target.value)}
+      onBlur={() => onChange(property.name, value)}
+      value={value}
+      disabled={property.isDisabled}
+    />
+  )
 }
 
-export default withTheme(Edit)
+export default withTheme(memo(Edit, recordPropertyIsEqual))
diff --git a/src/frontend/components/property-type/password/edit.tsx b/src/frontend/components/property-type/password/edit.tsx
index e08b8283e..692dc07e3 100644
--- a/src/frontend/components/property-type/password/edit.tsx
+++ b/src/frontend/components/property-type/password/edit.tsx
@@ -1,16 +1,26 @@
-import React, { useState, memo } from 'react'
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React, { useState, memo, useEffect } from 'react'
 import { Label, Input, FormGroup, InputGroup, FormMessage, Button, Icon } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import usePrevious from '../../../utils/usePrevious'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, record, onChange } = props
-  const value = record.params[property.name]
+  const propValue = record.params[property.name]
+  const [value, setValue] = useState(propValue)
   const error = record.errors && record.errors[property.name]
-
   const [isInput, setIsInput] = useState(false)
 
+  const previous = usePrevious(propValue)
+  useEffect(() => {
+    // this means props updated
+    if (propValue !== previous) {
+      setValue(propValue)
+    }
+  }, [])
+
   return (
     <FormGroup error={!!error}>
       <Label
@@ -25,7 +35,8 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
           className="input"
           id={property.name}
           name={property.name}
-          onChange={(event): void => onChange(property.name, event.target.value)}
+          onChange={event => setValue(event.target.value)}
+          onBlur={() => onChange(property.name, value)}
           value={value ?? ''}
           disabled={property.isDisabled}
         />
@@ -33,7 +44,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
           variant={isInput ? 'primary' : 'text'}
           type="button"
           size="icon"
-          onClick={(): void => setIsInput(!isInput)}
+          onClick={() => setIsInput(!isInput)}
         >
           <Icon icon="View" />
         </Button>
diff --git a/src/frontend/components/property-type/richtext/edit.tsx b/src/frontend/components/property-type/richtext/edit.tsx
index 2c949ec1d..5f03b68df 100644
--- a/src/frontend/components/property-type/richtext/edit.tsx
+++ b/src/frontend/components/property-type/richtext/edit.tsx
@@ -1,10 +1,79 @@
-/* eslint-disable jsx-a11y/label-has-for */
-import React, { ReactNode } from 'react'
-import { findDOMNode } from 'react-dom'
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable no-unused-expressions */
+import React, { useRef, useEffect, FC, useState, memo } from 'react'
+import styled from 'styled-components'
 import { FormGroup, Label, FormMessage } from '@admin-bro/design-system'
 
-import styled from 'styled-components'
 import { EditPropertyProps } from '../base-property-props'
+import { recordPropertyIsEqual } from '../record-property-is-equal'
+import loadQuill from '../../../utils/loadQuill'
+
+
+const Edit: FC<EditPropertyProps> = (props) => {
+  const { property, record, onChange } = props
+  const value = record.params?.[property.name] ?? ''
+  const error = record.errors && record.errors[property.name]
+
+  const [quill, setQuill] = useState<Quill | null>(null)
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let shouldLoad = true
+    loadQuill().then(() => {
+      if (!shouldLoad) {
+        return
+      }
+      const quillInstance = new (Quill as any)(editorRef.current, {
+        modules: { toolbar: toolbarOptions },
+        theme: 'snow',
+      })
+      setQuill(quillInstance)
+    })
+    return () => {
+      shouldLoad = false
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!editorRef.current || !quill) {
+      return
+    }
+    if (value) {
+      quill.root.innerHTML = value
+    }
+  }, [value, quill])
+
+  useEffect(() => {
+    const editor = quill?.root
+    if (!editor) {
+      return undefined
+    }
+    const handler = () => {
+      const content = editor.innerHTML
+      onChange?.(property.name, content)
+    }
+    editor?.addEventListener('blur', handler)
+    return () => {
+      editor?.removeEventListener('blur', handler)
+    }
+  }, [onChange, property.name, quill])
+
+  return (
+    <FormGroup error={Boolean(error)}>
+      <Label
+        htmlFor={property.name}
+        required={property.isRequired}
+      >
+        {property.label}
+      </Label>
+      <Wrapper>
+        <div className="quill-editor" ref={editorRef} style={{ height: '400px' }} />
+      </Wrapper>
+      <FormMessage>{error?.message}</FormMessage>
+    </FormGroup>
+  )
+}
 
 const toolbarOptions = [
   [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -41,117 +110,4 @@ const Wrapper = styled.div.attrs({
   }
 `
 
-const loadQuill = () => new Promise((resolve) => {
-  const id = 'quill-script-tag'
-  if (window.document.getElementById(id)) {
-    // it could be a situation where id exists but quill hasn't been loaded. In this case
-    // we check if Quill global variable exists
-    const checkIfLoaded = () => {
-      if (typeof Quill === 'function') {
-        resolve()
-      }
-    }
-    checkIfLoaded()
-    setInterval(checkIfLoaded, 500)
-    return
-  }
-  const script = window.document.createElement('script')
-  script.src = 'https://cdn.quilljs.com/1.3.6/quill.js'
-  script.async = true
-  script.defer = true
-  script.id = id
-  script.addEventListener('load', () => {
-    resolve()
-  })
-
-  const style = window.document.createElement('link')
-  style.rel = 'stylesheet'
-  style.type = 'text/css'
-  style.href = 'https://cdn.quilljs.com/1.3.6/quill.snow.css'
-
-  window.document.body.appendChild(script)
-  window.document.body.appendChild(style)
-})
-
-export default class Edit extends React.Component<EditPropertyProps> {
-  private wysiwigRef: React.RefObject<any>
-
-  private quill: any
-
-  constructor(props: EditPropertyProps) {
-    super(props)
-    this.wysiwigRef = React.createRef()
-  }
-
-  componentDidMount(): void {
-    loadQuill().then(() => {
-      this.setupWysiwig()
-    })
-  }
-
-  shouldComponentUpdate(nextProps: EditPropertyProps): boolean {
-    const { record, property } = this.props
-    if (!nextProps) { return false }
-    const oldError = record.errors
-                     && record.errors[property.name]
-                     && record.errors[property.name].message
-    const newError = nextProps.record.errors
-                     && nextProps.record.errors[property.name]
-                     && nextProps.record.errors[property.name].message
-    return oldError !== newError
-  }
-
-  componentDidUpdate(): void {
-    this.setupWysiwig()
-  }
-
-  setupWysiwig(): void {
-    const { property, record } = this.props
-    const value = (record.params && record.params[property.name]) || ''
-    this.wysiwigRef.current.innerHTML = value
-    if (this.quill) {
-      delete this.quill
-      // eslint-disable-next-line react/no-find-dom-node
-      const thisNode = findDOMNode(this) as Element
-      const toolbars = thisNode.getElementsByClassName('ql-toolbar')
-      for (let index = 0; index < toolbars.length; index += 1) {
-        toolbars[index].remove()
-      }
-    }
-    this.quill = new Quill(this.wysiwigRef.current, {
-      modules: {
-        toolbar: toolbarOptions,
-      },
-      theme: 'snow',
-      ...property.custom,
-    })
-
-    this.quill.on('text-change', () => {
-      this.handleChange(this.wysiwigRef.current.children[0].innerHTML)
-    })
-  }
-
-  handleChange(value: any): void {
-    const { onChange, property } = this.props
-    onChange(property.name, value)
-  }
-
-  render(): ReactNode {
-    const { property, record } = this.props
-    const error = record.errors && record.errors[property.name]
-    return (
-      <FormGroup error={!!error}>
-        <Label
-          htmlFor={property.name}
-          required={property.isRequired}
-        >
-          {property.label}
-        </Label>
-        <Wrapper>
-          <div className="quill-editor" ref={this.wysiwigRef} style={{ height: '400px' }} />
-        </Wrapper>
-        <FormMessage>{error && error.message}</FormMessage>
-      </FormGroup>
-    )
-  }
-}
+export default memo(Edit, recordPropertyIsEqual)
diff --git a/src/frontend/components/property-type/textarea/edit.tsx b/src/frontend/components/property-type/textarea/edit.tsx
index b315e7f77..786078853 100644
--- a/src/frontend/components/property-type/textarea/edit.tsx
+++ b/src/frontend/components/property-type/textarea/edit.tsx
@@ -1,28 +1,27 @@
-import React, { useCallback, memo } from 'react'
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React, { memo, useState, FC, useEffect } from 'react'
 import { Input, Label, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import usePrevious from '../../../utils/usePrevious'
 
-const Edit: React.FC<EditPropertyProps> = (props) => {
+const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
+  const propValue = record.params?.[property.name] ?? ''
+  const [value, setValue] = useState(propValue)
+  const error = record.errors?.[property.name]
 
-  const handleInputChange = useCallback((event): void => {
-    onChange(property.name, event.target.value)
-  }, [onChange, property.name])
-
-  const value = (
-    record.params
-    && typeof record.params[property.name] !== 'undefined'
-    && record.params[property.name] !== null
-  )
-    ? record.params[property.name]
-    : ''
-
-  const error = record.errors && record.errors[property.name]
+  const previous = usePrevious(propValue)
+  useEffect(() => {
+    // this means props updated
+    if (propValue !== previous) {
+      setValue(propValue)
+    }
+  }, [])
 
   return (
-    <FormGroup error={!!error}>
+    <FormGroup error={Boolean(error)}>
       <Label
         htmlFor={property.name}
         required={property.isRequired}
@@ -34,7 +33,8 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
         rows={(value.match(/\n/g) || []).length + 1}
         id={property.name}
         name={property.name}
-        onChange={handleInputChange}
+        onChange={e => setValue(e.target.value)}
+        onBlur={() => onChange(property.name, value)}
         value={value}
         disabled={property.isDisabled}
       />
diff --git a/src/frontend/utils/loadQuill.ts b/src/frontend/utils/loadQuill.ts
new file mode 100644
index 000000000..d192532a6
--- /dev/null
+++ b/src/frontend/utils/loadQuill.ts
@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+const loadQuill = (): Promise<void> => new Promise((resolve) => {
+  if (typeof Quill !== 'undefined') {
+    resolve()
+    return
+  }
+  const id = 'quill-script-tag'
+  if (window.document.getElementById(id)) {
+    // it could be a situation where id exists but quill hasn't been loaded. In this case
+    // we check if Quill global variable exists
+    const checkIfLoaded = () => {
+      if (typeof Quill === 'function') {
+        resolve()
+      }
+    }
+    checkIfLoaded()
+    setInterval(checkIfLoaded, 500)
+    return
+  }
+  const script = window.document.createElement('script')
+  script.src = 'https://cdn.quilljs.com/1.3.6/quill.js'
+  script.async = true
+  script.defer = true
+  script.id = id
+  script.addEventListener('load', () => {
+    resolve()
+  })
+
+  const style = window.document.createElement('link')
+  style.rel = 'stylesheet'
+  style.type = 'text/css'
+  style.href = 'https://cdn.quilljs.com/1.3.6/quill.snow.css'
+
+  window.document.body.appendChild(script)
+  window.document.body.appendChild(style)
+})
+
+export default loadQuill
diff --git a/src/frontend/utils/usePrevious.ts b/src/frontend/utils/usePrevious.ts
new file mode 100644
index 000000000..9a9d7ce04
--- /dev/null
+++ b/src/frontend/utils/usePrevious.ts
@@ -0,0 +1,14 @@
+/* eslint-disable arrow-parens */
+import { useRef, useEffect } from 'react'
+
+const usePrevious = <T>(value: T): T | null => {
+  const ref = useRef(value)
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
+export default usePrevious
diff --git a/vendor-types/quill/index.d.ts b/vendor-types/quill/index.d.ts
index e6a2d90e3..b36c165bd 100644
--- a/vendor-types/quill/index.d.ts
+++ b/vendor-types/quill/index.d.ts
@@ -1,3 +1,4 @@
 declare class Quill {
   constructor(ref: any, options: any);
+  root: HTMLDivElement;
 }
diff --git a/yarn.lock b/yarn.lock
index b2500d575..a41b966fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@admin-bro/design-system@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.3.2.tgz#ec409d189b5112dd27f8ece974f2a7252c6db8c7"
-  integrity sha512-uwPiOLYgqlEwBnaCmKh0FXdhsDZ4HNIVkCBXzEW9U2SNcccZprYFYE0r2W5m7j2A9yVTPnAwKrwzrYjSGe0OBw==
+"@admin-bro/design-system@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.3.3.tgz#a57d44988ec9501e7f199a49cad4f2b0180b9be1"
+  integrity sha512-sZ1ocow6pU5JuNA1mW4u8Sg82CEeT3jbD/GhSGzl4ct58A/iXC7uBoN6KvM/rqR+Fzk2T/EMh4ZCpEDh3Yp6Cw==
   dependencies:
     "@carbon/icons-react" "^10.14.0"
     jw-paginate "^1.0.4"