diff --git a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx index 109e444f6b..ede688092c 100644 --- a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx +++ b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx @@ -87,12 +87,14 @@ const RichInputField: React.FC = React.forwardRef( validate, idPostfix, richValidationMessages, + noDefaultOnChange, + onChange, ...props }, ref: React.Ref, ) => { const [popoverOpen, setPopoverOpen] = React.useState(false); - const [field, { error, value, touched }] = useField({ + const [field, { error, value, touched }, { setTouched }] = useField({ name: props.name, validate, }); @@ -118,6 +120,15 @@ const RichInputField: React.FC = React.forwardRef( id={fieldId} isRequired={isRequired} aria-describedby={`${fieldId}-helper`} + onChange={(event) => { + !noDefaultOnChange && field.onChange(event); + setTouched(true, false); + onChange && onChange(event); + if (!popoverOpen) setPopoverOpen(true); + }} + onBlur={() => { + setTouched(true, false); + }} className="rich-input__text" /> @@ -135,6 +146,7 @@ const RichInputField: React.FC = React.forwardRef( richValidationMessages={richValidationMessages as Record} /> } + withFocusTrap={false} >