Skip to content

fix(sdk): TextArea is highlighted; empty required strings trigger an error #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
szymon-t-sc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(sdk): TextArea is highlighted; empty required strings trigger an error #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/string-inputs-update.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@workflowbuilder/sdk': patch
---

Empty strings are marked as invalid for required string inputs. The TextArea is highlighted.
3 changes: 2 additions & 1 deletion packages/sdk/src/features/json-form/controls/text-area-control/text-area-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { createControlRenderer } from '../../utils/rendering';
import { ControlWrapper } from '../control-wrapper';

function TextAreaControl(props: TextAreaControlProps) {
const { data, handleChange, path, enabled, uischema } = props;
const { data, handleChange, path, enabled, uischema, errors } = props;
const { placeholder, minRows, maxRows, disabled } = uischema;
const isDisabled = !enabled || disabled === true;

Expand Down Expand Up @@ -35,6 +35,7 @@ function TextAreaControl(props: TextAreaControlProps) {
onChange={onChange}
onBlur={onBlur}
size="medium"
error={errors.length > 0}

@szymon-t-sc szymon-t-sc Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
Image

After:
Image

/>
</ControlWrapper>
);
Expand Down
5 changes: 1 addition & 4 deletions packages/sdk/src/features/json-form/controls/text-control/text-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,7 @@ function TextControl(props: TextControlProps) {
function onBlur() {
const trimmed = inputValue.trim();

if (trimmed === '') {
// eslint-disable-next-line unicorn/no-useless-undefined
handleChange(path, undefined);
} else if (isNumberInput) {

@szymon-t-sc szymon-t-sc Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'' is saved as regular string.

We set undefined earlier to remove that property, allowing the validator to mark the field as required. This behavior was not implemented in TextArea, where '' was set instead, so the required validation error was not triggered.

This change unifies the behavior between the two fields.

Why use this approach instead of adding undefined to textarea? This is primarily a validator issue and should be fixed there. Removing the property works for new props, but if we set defaultProperties with empty '' (which is fine) validation will not work correctly because it assigns undefined onBlur in the control.

Having clear default values like '', which match the expected type, is preferable to relying on control behavior.

if (isNumberInput) {
const number_ = Number(trimmed);
handleChange(path, Number.isNaN(number_) ? undefined : number_);
} else {
Expand Down
6 changes: 5 additions & 1 deletion packages/sdk/src/utils/validation/workflow-builder-validator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,11 @@ function createValidateFunction(schema: object): ValidateFunction {
const validator = new Validator(schema as Schema, '7', false);

const validateFn = (data: unknown): boolean => {
const result = validator.validate(data);
// Default schema accepts '' string as valid for required this, clears those values and prompts required.
const formattedData = Object.fromEntries(
Object.entries(data || {}).filter(([, value]) => !(typeof value === 'string' && value.trim() === '')),
);
const result = validator.validate(formattedData);
validateFn.errors = result.valid ? null : mapOutputToErrorObjects(result.errors);
return result.valid;
};
Expand Down
Loading