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

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

Author: abdul99ahad

src/components/entries/FEEL/Feel.js

@@ -45,6 +45,7 @@ function FeelTextfieldComponent(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -83,6 +84,9 @@ function FeelTextfieldComponent(props) {
     _setFocus(position + offset);
   };
 
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
   const handleInputCallback = useMemo(() => {
     return debounce((newValue) => {
       onInput(newValue);
@@ -92,12 +96,11 @@ function FeelTextfieldComponent(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(() => {
@@ -130,6 +133,20 @@ function FeelTextfieldComponent(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');
@@ -256,6 +273,7 @@ function FeelTextfieldComponent(props) {
             { ...props }
             popupOpen={ popuOpen }
             onInput={ handleLocalInput }
+            onBlur={ handleOnBlur }
             contentAttributes={ { 'id': prefixId(id), 'aria-label': label } }
             value={ localValue }
             ref={ editorRef }
@@ -554,7 +572,7 @@ export default function FeelEntry(props) {
     }
   }, [ value, validate ]);
 
-  const onInput = useStaticCallback((newValue) => {
+  const onInput = useCallback((newValue) => {
     let newValidationError = null;
 
     if (isFunction(validate)) {
@@ -567,7 +585,7 @@ export default function FeelEntry(props) {
     }
 
     setValidationError(newValidationError);
-  });
+  },[ element ]);
 
   const onError = useCallback(err => {
     setLocalError(err);

test/spec/components/Feel.spec.js

@@ -92,6 +92,76 @@ describe('<FeelField>', function() {
     });
 
 
+    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() {
@@ -1078,6 +1148,76 @@ describe('<FeelField>', function() {
     });
 
 
+    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() {
@@ -2622,6 +2762,7 @@ function createFeelField(options = {}, renderFn = render) {
     container,
     eventBus = new EventBus(),
     onShow = noop,
+    onBlur = noop,
     errors = {},
     variables,
     openPopup = noop,
@@ -2668,6 +2809,7 @@ function createFeelField(options = {}, renderFn = render) {
                 disabled={ disabled }
                 getValue={ getValue }
                 setValue={ setValue }
+                onBlur={ onBlur }
                 debounce={ debounce }
                 validate={ validate }
                 feel={ feel }