fix(app-headless-cms): ensure validation is visible with DelayedOnChange

webiny · May 23, 2024 · 42f3b1c · 42f3b1c
1 parent 4970a5a
commit 42f3b1c
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 29 deletions.
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx
@@ -26,15 +26,22 @@ const plugin: CmsModelFieldRendererPlugin = {
 
  return (
  <Bind>
- <DelayedOnChange>
- <Input
- rows={5}
- label={field.label}
- placeholder={field.placeholderText}
- description={field.helpText}
- data-testid={`fr.input.longtext.${field.label}`}
- />
- </DelayedOnChange>
+ {bind => (
+ <DelayedOnChange
+ value={bind.value}
+ onChange={bind.onChange}
+ onBlur={bind.validate}
+ >
+ <Input
+ rows={5}
+ label={field.label}
+ placeholder={field.placeholderText}
+ description={field.helpText}
+ data-testid={`fr.input.longtext.${field.label}`}
+ validation={bind.validation}
+ />
+ </DelayedOnChange>
+ )}
  </Bind>
  );
  }

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx
@@ -27,8 +27,13 @@ const plugin: CmsModelFieldRendererPlugin = {
  return (
  <DynamicSection {...props}>
  {({ bind, index }) => (
- <DelayedOnChange {...bind.index}>
+ <DelayedOnChange
+ value={bind.index.value}
+ onChange={bind.index.onChange}
+ onBlur={bind.index.validate}
+ >
  <Input
+ validation={bind.index.validation}
  rows={5}
  label={t`Value {number}`({ number: index + 1 })}
  placeholder={props.field.placeholderText}

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx
@@ -26,15 +26,22 @@ const plugin: CmsModelFieldRendererPlugin = {
 
  return (
  <Bind>
- <DelayedOnChange>
- <Input
- label={field.label}
- placeholder={field.placeholderText}
- description={field.helpText}
- type="number"
- data-testid={`fr.input.number.${field.label}`}
- />
- </DelayedOnChange>
+ {bind => (
+ <DelayedOnChange
+ value={bind.value}
+ onChange={bind.onChange}
+ onBlur={bind.validate}
+ >
+ <Input
+ label={field.label}
+ placeholder={field.placeholderText}
+ description={field.helpText}
+ type="number"
+ data-testid={`fr.input.number.${field.label}`}
+ validation={bind.validation}
+ />
+ </DelayedOnChange>
+ )}
  </Bind>
  );
  }

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx
@@ -27,8 +27,13 @@ const plugin: CmsModelFieldRendererPlugin = {
  return (
  <DynamicSection {...props}>
  {({ bind, index }) => (
- <DelayedOnChange {...bind.index}>
+ <DelayedOnChange
+ value={bind.index.value}
+ onChange={bind.index.onChange}
+ onBlur={bind.index.validate}
+ >
  <Input
+ validation={bind.index.validation}
  onEnter={() => bind.field.appendValue("")}
  label={t`Value {number}`({ number: index + 1 })}
  placeholder={props.field.placeholderText}

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx
@@ -26,14 +26,21 @@ const plugin: CmsModelFieldRendererPlugin = {
 
  return (
  <Bind>
- <DelayedOnChange>
- <Input
- label={field.label}
- placeholder={field.placeholderText}
- description={field.helpText}
- data-testid={`fr.input.text.${field.label}`}
- />
- </DelayedOnChange>
+ {bind => (
+ <DelayedOnChange
+ value={bind.value}
+ onChange={bind.onChange}
+ onBlur={bind.validate}
+ >
+ <Input
+ label={field.label}
+ placeholder={field.placeholderText}
+ description={field.helpText}
+ data-testid={`fr.input.text.${field.label}`}
+ validation={bind.validation}
+ />
+ </DelayedOnChange>
+ )}
  </Bind>
  );
  }

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx
@@ -27,8 +27,13 @@ const plugin: CmsModelFieldRendererPlugin = {
  return (
  <DynamicSection {...props}>
  {({ bind, index }) => (
- <DelayedOnChange {...bind.index}>
+ <DelayedOnChange
+ value={bind.index.value}
+ onChange={bind.index.onChange}
+ onBlur={bind.index.validate}
+ >
  <Input
+ validation={bind.index.validation}
  onEnter={() => bind.field.appendValue("")}
  label={t`Value {number}`({ number: index + 1 })}
  placeholder={props.field.placeholderText}