feat(components/feel): added onblur to handle post input

- onblur updates the value async
- trims the whitespaces if exists
- applied to feel-textfield and feel-textarea
Closes #404
Related to: #309 post work

Integration tests: bpmn-io/bpmn-js-properties-panel#1118

Author: abdul99ahad

src/components/entries/FEEL/Feel.js

@@ -43,6 +43,7 @@ function FeelTextfield(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -80,6 +81,9 @@ function FeelTextfield(props) {
     _setFocus(position + offset);
   };
 
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
   const handleInputCallback = useMemo(() => {
     return debounce((newValue) => {
       onInput(newValue);
@@ -89,12 +93,11 @@ function FeelTextfield(props) {
   const setLocalValue = newValue => {
     _setLocalValue(newValue);
 
-    if (typeof newValue === 'undefined' || newValue === '' || newValue === '=') {
-      handleInputCallback(undefined);
-    } else {
-      handleInputCallback(newValue);
-    }
+    // we don't commit empty FEEL expressions,
+    // but instead serialize them as <undefined>
+    const newModelValue = (newValue === '' || newValue === '=') ? undefined : newValue;
 
+    handleInputCallback(newModelValue);
   };
 
   const handleFeelToggle = useStaticCallback(() => {
@@ -127,6 +130,20 @@ function FeelTextfield(props) {
     }
   };
 
+  const handleOnBlur = (e) => {
+    const value = e.target.value;
+
+    // we trim the value, if it is needed
+    // and update input accordingly
+    if (value.trim() !== value) {
+      setLocalValue(value.trim());
+    }
+
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+
   const handleLint = useStaticCallback((lint = []) => {
 
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
@@ -263,6 +280,7 @@ function FeelTextfield(props) {
             { ...props }
             popupOpen={ isPopupOpen }
             onInput={ handleLocalInput }
+            onBlur={ handleOnBlur }
             contentAttributes={ { 'id': prefixId(id), 'aria-label': label } }
             value={ localValue }
             ref={ editorRef }
@@ -558,7 +576,7 @@ export default function FeelEntry(props) {
     }
   }, [ value, validate ]);
 
-  const onInput = useStaticCallback((newValue) => {
+  const onInput = useCallback((newValue) => {
     let newValidationError = null;
 
     if (isFunction(validate)) {
@@ -571,7 +589,7 @@ export default function FeelEntry(props) {
     }
 
     setValidationError(newValidationError);
-  });
+  },[ element ]);
 
   const onError = useCallback(err => {
     setLocalError(err);

test/spec/components/Feel.spec.js

@@ -79,7 +79,78 @@ describe('<FeelEntry>', function() {
       expect(updateSpy).to.have.been.calledWith('foo');
     });
 
+    it('should trim whitespace on blur', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+
+      const result = createFeelField({
+        container,
+        setValue: setValueSpy
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '  foo  ');
+      input.blur();
+
+      // then
+      expect(setValueSpy).to.have.been.calledTwice;
+      expect(setValueSpy).to.have.been.calledWith('foo');
+    });
+
+
+    it('should call onBlur if provided', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+      const onBlurSpy = sinon.spy();
+
+      const result = createFeelField({
+        container,
+        setValue: setValueSpy,
+        onBlur: onBlurSpy
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '  foo  ');
+      input.blur();
+
+      // then
+      expect(onBlurSpy).to.have.been.calledOnce;
+    });
+
+
+    it('should not call setValue if the value is same', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+
+      const result = createFeelField({
+        container,
+        setValue: setValueSpy
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '');
+      input.blur();
+
+      // then
+      expect(setValueSpy).to.not.have.been.called;
+
+    });
+
+
     describe('#isEdited', function() {
+
       it('should NOT be edited', function() {
 
         // given
@@ -1065,7 +1136,78 @@ describe('<FeelEntry>', function() {
       expect(updateSpy).to.have.been.calledWith('foo');
     });
 
+    it('should trim whitespace on blur', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+
+      const result = createFeelTextArea({
+        container,
+        setValue: setValueSpy,
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '  foo  ');
+      input.blur();
+
+      // then
+      expect(setValueSpy).to.have.been.calledTwice;
+      expect(setValueSpy).to.have.been.calledWith('foo');
+    });
+
+
+    it('should call onBlur if provided', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+      const onBlurSpy = sinon.spy();
+
+      const result = createFeelTextArea({
+        container,
+        setValue: setValueSpy,
+        onBlur: onBlurSpy
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '  foo  ');
+      input.blur();
+
+      // then
+      expect(onBlurSpy).to.have.been.calledOnce;
+    });
+
+
+    it('should not call setValue if the value is same', async function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+
+      const result = createFeelTextArea({
+        container,
+        setValue: setValueSpy
+      });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      input.focus();
+      changeInput(input, '');
+      input.blur();
+
+      // then
+      expect(setValueSpy).to.not.have.been.called;
+
+    });
+
+
     describe('#isEdited', function() {
+
       it('should NOT be edited', function() {
 
         // given
@@ -2692,6 +2834,7 @@ function createFeelField(options = {}, renderFn = render) {
     container,
     eventBus = new EventBus(),
     onShow = noop,
+    onBlur = noop,
     errors = {},
     variables,
     Component = FeelField,
@@ -2728,6 +2871,7 @@ function createFeelField(options = {}, renderFn = render) {
               disabled={ disabled }
               getValue={ getValue }
               setValue={ setValue }
+              onBlur={ onBlur }
               debounce={ debounce }
               validate={ validate }
               feel={ feel }