@abgov/jsonforms-components 1.24.9 → 1.24.11

package/index.esm.js

@@ -3459,8 +3459,7 @@ const GoATextControlTester = rankWith(1, isStringControl);
 const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
 const MultiLineText = props => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     data,
     config,
@@ -3472,35 +3471,69 @@ const MultiLineText = props => {
     schema,
     label
   } = props;
+  const {
+    required
+  } = props;
+  const [textAreaValue, _] = React.useState(data);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const errorsFormInput = checkFieldValidity(props);
   const autoCapitalize = ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.autoCapitalize) === true || ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autoCapitalize) === true;
   const readOnly = (_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.readOnly) !== null && _f !== void 0 ? _f : false;
-  return jsx(GoATextArea, Object.assign({
+  const textAreaName = `${label || path}-text-area` || '';
+  const textarea = (_g = document.getElementsByName(textAreaName)[0]) !== null && _g !== void 0 ? _g : null;
+  useEffect(() => {
+    if (textarea) {
+      textarea.addEventListener('blur', onBlur);
+    }
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener('blur', onBlur);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textarea]);
+  const onBlur = event => {
+    let eventTargetValue = '';
+    if (event.target) {
+      eventTargetValue = event.target.value;
+    }
+    onBlurForTextControl({
+      name: path,
+      controlProps: props,
+      value: autoCapitalize ? eventTargetValue.toUpperCase() : eventTargetValue
+    });
+  };
+  const txtAreaComponent = jsx(GoATextArea, Object.assign({
     error: errorsFormInput.length > 0,
-    value: data,
+    value: textAreaValue,
     disabled: !enabled,
     readOnly: readOnly,
     placeholder: placeholder,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    name: `${label || path}-text-area`,
+    name: textAreaName,
     width: '100%',
     // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
-      onKeyPressForTextControl({
-        name,
-        value: autoCapitalize ? value.toUpperCase() : value,
-        key,
-        controlProps: props
-      });
+      const newValue = autoCapitalize ? value.toUpperCase() : value;
+      if (value.length === 0 || required && errorsFormInput.length === 0 && value.length > 0) {
+        onKeyPressForTextControl({
+          name,
+          value: newValue,
+          key,
+          controlProps: props
+        });
+      }
     },
-    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldnt.
-    onChange: (name, value) => {}
-  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
+    onChange: (name, value) => {
+      if (data !== value) {
+        const newValue = autoCapitalize ? value.toUpperCase() : value;
+        handleChange(path, newValue);
+      }
+    }
+  }, (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps));
+  return txtAreaComponent;
 };
 const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: MultiLineText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.24.9",
+  "version": "1.24.11",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/Inputs/InputMultiLineTextControl.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputMultiLineTextProps = CellProps & WithClassname & WithInputProps;
 export declare const MultiLineText: (props: GoAInputMultiLineTextProps) => JSX.Element;
 export declare const MultiLineTextControlInput: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiLineTextControlTester: RankedTester;
-export declare const MultiLineTextControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const MultiLineTextControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;