Merge branch 'develop' into array-function-operators

packages/blocks/blocksAntd/src/blocks/RatingSlider/RatingSlider.js

@@ -113,7 +113,6 @@ const RatingSlider = ({
               styles.content,
               {
                 paddingRight: validation.status && 30,
-                paddingTop: 18,
               },
             ])}
           >

packages/blocks/blocksAntd/src/blocks/TextArea/TextArea.js

@@ -19,6 +19,7 @@ import { type } from '@lowdefy/helpers';
 import { blockDefaultProps } from '@lowdefy/block-tools';
 import { Input } from 'antd';
 import Label from '../Label/Label';
+import useRunAfterUpdate from '../../useRunAfterUpdate';
 
 const TextAreaComp = Input.TextArea;
 
@@ -43,6 +44,7 @@ const TextAreaBlock = ({
       methods={methods}
       content={{
         content: () => {
+          const runAfterUpdate = useRunAfterUpdate();
           return (
             <TextAreaComp
               id={`${blockId}_input`}
@@ -52,6 +54,11 @@ const TextAreaBlock = ({
               onChange={(event) => {
                 methods.setValue(event.target.value);
                 methods.triggerEvent({ name: 'onChange' });
+                const cStart = event.target.selectionStart;
+                const cEnd = event.target.selectionEnd;
+                runAfterUpdate(() => {
+                  event.target.setSelectionRange(cStart, cEnd);
+                });
               }}
               onPressEnter={() => {
                 methods.triggerEvent({ name: 'onPressEnter' });

packages/blocks/blocksAntd/src/blocks/TextInput/TextInput.js

@@ -20,6 +20,7 @@ import { blockDefaultProps } from '@lowdefy/block-tools';
 
 import Label from '../Label/Label';
 import Icon from '../Icon/Icon';
+import useRunAfterUpdate from '../../useRunAfterUpdate';
 
 const TextInput = ({
   blockId,
@@ -42,6 +43,7 @@ const TextInput = ({
       validation={validation}
       content={{
         content: () => {
+          const runAfterUpdate = useRunAfterUpdate();
           return (
             <Input
               id={`${blockId}_input`}
@@ -51,6 +53,11 @@ const TextInput = ({
               onChange={(event) => {
                 methods.setValue(event.target.value);
                 methods.triggerEvent({ name: 'onChange' });
+                const cStart = event.target.selectionStart;
+                const cEnd = event.target.selectionEnd;
+                runAfterUpdate(() => {
+                  event.target.setSelectionRange(cStart, cEnd);
+                });
               }}
               onPressEnter={() => {
                 methods.triggerEvent({ name: 'onPressEnter' });

packages/blocks/blocksAntd/src/useRunAfterUpdate.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const useRunAfterUpdate = () => {
+  const afterPaintRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (afterPaintRef.current) {
+      afterPaintRef.current();
+      afterPaintRef.current = null;
+    }
+  });
+  return (fn) => {
+    afterPaintRef.current = fn;
+  };
+};
+
+export default useRunAfterUpdate;

packages/engine/src/Blocks.js

@@ -295,6 +295,7 @@ class Blocks {
     this.loopBlocks((block) => {
       if (block.meta.category === 'input') {
         const stateValue = get(this.context.state, block.field);
+        // TODO: related to #345
         // enforce type here? should we reassign value here??
         block.value = type.isUndefined(stateValue) ? block.value : stateValue;
       }