Atlaskit TextField onChange validate not working

Hi,

I use inside my app a Form with Field and TextField. It works all very nice, but if I add the validate the problems comes.

I find out in the case I overwrite from the fieldProps the onCahnge the validate function from the Field not throw an error.

I use mobX as state manger for my TextField and I need a custom onChange Methode. hoe it is possible to validate a value and have a store?

Here my code

<Field
  aria-required
  name="title"
  label="Name of the Field"
  isRequired
  defaultValue={store.item.title}
  validate={(value) => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}
>
  {({ fieldProps, error, valid }) => (
    <div>
      <TextField
        {...fieldProps}
        testId="field-text-field-title"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          store.updateProperty(e.currentTarget.name, e.currentTarget.value);
        }}
      />
      {!error && !valid && (
      <HelperMessage>
        Should be more than 4 characters
      </HelperMessage>
      )}
      {!error && valid && (
      <ValidMessage>
        Nice one, this username is available
      </ValidMessage>
      )}
      {error === 'TOO_SHORT' && (
      <ErrorMessage>
        Invalid username, needs to be more than 4 characters
      </ErrorMessage>
      )}
      {error === 'IN_USE' && (
      <ErrorMessage>
        Username already taken, try another one
      </ErrorMessage>
      )}
    </div>
  )}
</Field>

Thank you for the help

@nhac.tat.nguyen can you help?

Hi, thanks for mentioning me.

For this, you should call fieldProps.onChange as well, along with the other calls.

2 Likes

@nhac.tat.nguyen

Thank you for you help. Its works, but I have now the problem, that my side is tow times called by react router. So all what I enter to my TextField have no influence at moment.

Sorry I did not catch the question.

What do you mean with “my side is tow times called by react router.”? Does it mean your component render two times in a row?

What do you mean with “So all what I enter to my TextField have no influence at moment.”.

@nhac.tat.nguyen I think I use memo wrong because then I enter one letter my function onChange ist called three times. And my Form is render on the screen tow time , but it should be only one time.

How you solve your problem?