Loses the focus after entering one key input

[isuruAb]

I'm trying to build a simple form and trying to use <Controller> component in my code.

Here is the Codesandbox link: https://codesandbox.io/s/happy-haze-h2y8b?file=/src/FormField.js
Version: 7.25.0

Problem: When I key in one character it loses focus. (It happens only once) again it loses the focus on validation failure.

What I have tried: When I remove the rules from App.js:35 the line, it starts to work fine.

Any clue Where I have done wrong. Any help/advice would be appreciated.

[bluebill1049]

works for me.

[isuruAb]

Does it work without losing focus? 😳

[bluebill1049]

yea works for me 👍

[iamchathu]

It doesn't work for me too. The focus is lost after first keystroke

[isuruAb]

I have attached a screen recording below

[bluebill1049]

Screen.Recording.2022-01-25.at.11.56.30.pm.mov

[isuruAb]

this recording shows how it loses the focus time to time. Could you please check it again.

screenrecord.mov

[bluebill1049]

export default function App() {
  // bug is bleow your component is getting unmount and remount each render move it out
  const FieldWrapper = styled.div`
    margin-top: 45px;
  `;

to

// bug is bleow your component is getting unmount and remount each render move it out
  const FieldWrapper = styled.div`
    margin-top: 45px;
  `;

export default function App() {

not a hook form related issue

[Moshyfawn]

Moving your style code out of the component was it

No. Moving whatever component initialization outside of another component "was it".

[vgjenks]

Got it. Thanks!

[guplem]

My issue is that I need the component to be re-rendered since I change its colors depending on isValid and errors.

What would you suggest I do in my case?

This is the code of the form:

import { StyledRow, PageView } from 'app/design/layout'
import {
  StyledTitleBig,
  StyledText,
  StyledErrorText,
} from 'app/design/typography'
import { StyledElevatedButton, StyledTextButton } from 'app/design/buttons'
import { ConfigurationHandler } from '../../app/configuration-handler'
import { useAuthStore } from '../store'
import { useForm, Controller } from 'react-hook-form'
import { StyledTextInput } from 'app/design/forms'
import colors from 'app/design/colors'
import { useTranslation } from 'react-i18next'
import { login } from '../actions'
import { useAppStore } from 'app/features/app/store'
import { useUserStore } from 'app/features/user/store'

export function LoginScreen() {
  const skippedLogin = useAuthStore((state) => state.skipLogin)
  const setRegistrationNeeded = useAuthStore(
    (state) => state.setRegistrationNeeded
  )
  const fcmToken = useAppStore((state) => state.fcmToken)
  const language = useUserStore((state) => state.language)
  const { t } = useTranslation()
  const {
    control,
    handleSubmit,
    formState: { errors, isValid, submitCount },
  } = useForm({
    defaultValues: {
      phoneField: '',
      passwordField: '',
    },
  })
  const onSubmit = (data) => {
    const submittedPhone = data.phoneField
    const submittedPassword = data.passwordField
    console.log('Phone: ' + submittedPhone + ', Password: ' + submittedPassword)
    login(submittedPhone, submittedPassword, language, fcmToken)
  }

  return (
    <ConfigurationHandler>
      <PageView className="gap-2">
        <StyledTitleBig>Login Screen</StyledTitleBig>
        <StyledRow>
          <StyledText className="px-1">+255</StyledText>
          <Controller
            control={control}
            name="phoneField"
            rules={{
              required: true,
            }}
            render={({ field: { onChange, onBlur, value } }) => (
              <StyledTextInput
                textContentType="telephoneNumber"
                placeholder={t('PhoneNumber')}
                placeholderTextColor={
                  errors.phoneField
                    ? colors.OnErrorContainer
                    : colors.OnBackground
                }
                maxLength={9}
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
                className={
                  'flex-1 ' + // Important space at the end to be able to add more styles!
                  (errors.phoneField ? '!border-Error !bg-ErrorContainer' : '')
                }
              />
            )}
          />
        </StyledRow>
        {/* {errors.phoneField && <Text>t("Phone number is required")</Text>} */}
        <Controller
          control={control}
          name="passwordField"
          rules={{
            required: true,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <StyledTextInput
              textContentType="password"
              placeholder={t('Password')}
              placeholderTextColor={
                errors.passwordField
                  ? colors.OnErrorContainer
                  : colors.OnBackground
              }
              secureTextEntry={true}
              onBlur={onBlur}
              onChangeText={onChange}
              value={value}
              className={
                errors.passwordField ? '!border-Error !bg-ErrorContainer' : ''
              }
            />
          )}
        />
        {/* {errors.passwordField && <Text>Password is required.</Text>} */}
        {!isValid && submitCount > 0 ? (
          <StyledErrorText>
            {t('PleaseFillAllTheRequiredDetails')}
          </StyledErrorText>
        ) : (
          <></>
        )}

        <StyledElevatedButton
          title={t('Login')}
          onPress={handleSubmit(onSubmit)}
          visuallyEnabled={isValid}
        />
        <StyledText>{t('Or')}</StyledText>
        <StyledElevatedButton
          title={t('DontHaveAnAccountSignUp')}
          onPress={async () => setRegistrationNeeded(true)}
        />
        <StyledTextButton
          title={t('Skip')}
          onPress={async () => skippedLogin()}
        />
      </PageView>
    </ConfigurationHandler>
  )
}

[Moshyfawn]

I need the component to be re-rendered since I change its colors depending on isValid and errors

That's how React re-renders work: if a prop you pass to a component changes, the component get re-rendered. There's no need to nest component initialization inside other components whatsoever

[guplem]

@Moshyfawn thanks for your reply. I think I understand the logic about it, and I am trying to implement it, but I think there is something else wrong that I am not seeing. I am quite new to React Native, and probably I am struggling because of that…

I do believe that I have removed the fields' initialization from the parent component (and even the controllers, just in case, since removing just the fields didn't work).

Now my code looks like this:

import { StyledRow, PageView } from 'app/design/layout'
import {
  StyledTitleBig,
  StyledText,
  StyledErrorText,
} from 'app/design/typography'
import { StyledElevatedButton, StyledTextButton } from 'app/design/buttons'
import { ConfigurationHandler } from '../../app/configuration-handler'
import { useAuthStore } from '../store'
import { useForm, Controller } from 'react-hook-form'
import { StyledTextInput } from 'app/design/forms'
import colors from 'app/design/colors'
import { useTranslation } from 'react-i18next'
import { login } from '../actions'
// import { useAppStore } from 'app/features/app/store'
import { useUserStore } from 'app/features/user/store'
import { useState } from 'react'

export function LoginScreen() {
  const skippedLogin = useAuthStore((state) => state.skipLogin)
  const setRegistrationNeeded = useAuthStore(
    (state) => state.setRegistrationNeeded
  )
  // const fcmToken = useAppStore((state) => state.fcmToken)
  const language = useUserStore((state) => state.language)
  const saveUserDataAfterSuccess = useUserStore((state) => state.setUserData)
  const { t } = useTranslation()
  const {
    control,
    handleSubmit,
    formState: { errors, isValid, submitCount },
  } = useForm({
    defaultValues: {
      phoneField: '',
      passwordField: '',
    },
  })
  const onSubmit = (data) => {
    setMessage(null)
    const submittedPhone = data.phoneField
    const submittedPassword = data.passwordField
    console.log('Phone: ' + submittedPhone + ', Password: ' + submittedPassword)
    login(
      saveUserDataAfterSuccess,
      '255' + submittedPhone,
      submittedPassword,
      language
      // fcmToken
    ).then((message) => setMessage(message))
  }
  const [message, setMessage] = useState(null)

  return (
    <ConfigurationHandler>
      <PageView className="gap-2">
        <StyledTitleBig>Login Screen</StyledTitleBig>
        <StyledRow>
          <StyledText className="px-1">+255</StyledText>
          <PhoneNumberFieldController control={control} t={t} />
        </StyledRow>
        {/* {errors.phoneField && <Text>t("Phone number is required")</Text>} */}
        <PasswordFieldController control={control} t={t} />
        {/* {errors.passwordField && <Text>Password is required.</Text>} */}
        {message || (!isValid && submitCount > 0) ? (
          <StyledErrorText>
            {/*translate the message variable*/}
            {message ? message : t('PleaseFillAllTheRequiredDetails')}
          </StyledErrorText>
        ) : (
          <></>
        )}

        <StyledElevatedButton
          title={t('Login')}
          onPress={handleSubmit(onSubmit)}
          visuallyEnabled={isValid}
        />
        <StyledText>{t('Or')}</StyledText>
        <StyledElevatedButton
          title={t('DontHaveAnAccountSignUp')}
          onPress={async () => setRegistrationNeeded(true)}
        />
        <StyledTextButton
          title={t('Skip')}
          onPress={async () => skippedLogin()}
        />
      </PageView>
    </ConfigurationHandler>
  )
}

const PhoneNumberFieldController = ({ control, t }) => {
  return (
    <Controller
      control={control}
      name="phoneField"
      rules={{
        required: true,
      }}
      render={({
        field: { onChange, onBlur, value, name, ref },
        fieldState: { isTouched, isDirty, error },
        formState: { errors },
      }) => (
        <PhoneFieldStyledInput
          t={t}
          errors={errors}
          onBlur={onBlur}
          value={value}
          onChange={onChange}
        />
      )}
    />
  )
}

const PhoneFieldStyledInput = ({ onChange, errors, onBlur, value, t }) => (
  <StyledTextInput
    textContentType="telephoneNumber"
    placeholder={t('PhoneNumber')}
    placeholderTextColor={
      errors.phoneField ? colors.OnErrorContainer : colors.OnBackground
    }
    maxLength={9}
    onBlur={onBlur}
    onChangeText={onChange}
    value={value}
    className={
      'flex-1 ' + // Important space at the end to be able to add more styles!
      (errors.phoneField ? '!border-Error !bg-ErrorContainer' : '')
    }
  />
)

const PasswordFieldController = ({ control, t }) => {
  return (
    <Controller
      control={control}
      name="passwordField"
      rules={{
        required: true,
      }}
      render={({
        field: { onChange, onBlur, value, name, ref },
        fieldState: { isTouched, isDirty, error },
        formState: { errors },
      }) => (
        <PasswordFieldStyledInput
          t={t}
          errors={errors}
          onBlur={onBlur}
          value={value}
          onChange={onChange}
        />
      )}
    />
  )
}

const PasswordFieldStyledInput = ({ onChange, errors, onBlur, value, t }) => (
  <StyledTextInput
    textContentType="password"
    placeholder={t('Password')}
    placeholderTextColor={
      errors.passwordField ? colors.OnErrorContainer : colors.OnBackground
    }
    secureTextEntry={true}
    onBlur={onBlur}
    onChangeText={onChange}
    value={value}
    className={errors.passwordField ? '!border-Error !bg-ErrorContainer' : ''}
  />
)

But I am experiencing the exact same behavior…

Edit: Since I didn't get any response in this question, I asked another question that you can find here and eventually figure out the solution. You can find it there as well.

[tinncdev]

I have similar issue but caused by disabling all controls when formState.isValidating

<Form {...form}>
  <form
    onSubmit={_onSubmit}>
    <fieldset
      disabled={
        props.disabled ||
        form.formState.isLoading ||
        form.formState.isValidating ||
        form.formState.isSubmitting
      }
    >
     {_renderFormControls()}
    </fieldset>
  </form>
</Form>