usePhoneInput, onChange

[organroman]

Hey.
I faced the issue with onChange method in usePhoneInput hook. I use this in form which can create a new card and open existing one. The issue happens when i open existing card - onChange is trigged during the opening card and the value with phone number disappears from the field. The same happens when i create a new card and after completing the phone number i switch to another tab in this form to complete other fields and the value in phone field disappear once i come back to tab with phone field. Could you please give some pieces of advice how to overcome it?

[ybrusentsov]

Hey @organroman! Seems like you are passing empty (or not formatted) value and onChange is triggered on initial formatting.
Make sure you are passing already formatted value, for example:

usePhoneInput({
  defaultCountry: 'us',
  value: '+1 ',
  onChange: (data) => {},
});

Can you provide some live code examples if that doesn't help in your case? 🙏

[organroman]

@goveo Thank you very much for your reply, it helped me a lot. The issue was in value property , because I passed here the value from form (full phone number), not the country code from the select in InputProps.
Much appreciated your assistance!

[ybrusentsov]

Glad this helped 🔥
Thank you for your effort! ⭐ Consider leaving a star on this repo if you like the project.

[organroman]

@goveo hey! One more question if you wouldn't mind. Is there any possibility to store the value without formatting, but display in input with formatting? in storybook (with initialValues) I've seen that value without spaces are formatting in relevant mask. however I can' reach it in my component. I would highly appreciate for your advice.

here is how I use it:

import { useField } from 'formik';
import { TextField, Typography, MenuItem, Select, InputAdornment } from '@mui/material';
import { defaultCountries, FlagEmoji, parseCountry, usePhoneInput } from 'react-international-phone';
import { memo } from 'react';

const FormikPhone = ({ name, disableError, adornmentProps, value, ...rest }) => {
  const [field, meta, state] = useField(name);
  const { handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
    defaultCountry: 'ua',
    value,
    countries: defaultCountries,
    onChange: (data) => {
      state.setValue(data.phone);
    },
  });


  return (
    <TextField
      {...field}
      {...rest}
      value={field.value}
      InputLabelProps={{ shrink: true }}
      autoComplete="off"
      onChange={handlePhoneValueChange}
      type="tel"
      inputRef={inputRef}
      error={!disableError && !!meta.error && meta.touched}
      helperText={!disableError && !!meta.error && meta.touched && meta.error}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start" style={{ marginLeft: '-14px' }}>
            <Select
              style={{ backgroundColor: 'transparent' }}
              MenuProps={{
                style: {
                  height: '300px',
                  width: '100%',
                  top: '10px',
                  left: '-34px',
                },
                transformOrigin: {
                  vertical: 'top',
                  horizontal: 'left',
                },
              }}
              sx={{
                width: 'max-content',
                // Remove default outline (display only on focus)
                fieldset: {
                  display: 'none',
                },
                '&.Mui-focused:has(div[aria-expanded="false"])': {
                  fieldset: {
                    display: 'none',
                  },
                },
                // Update default spacing
                '.MuiSelect-select': {
                  paddingRight: '24px !important',
                },
                svg: {
                  right: 0,
                },
              }}
              value={country}
              onChange={(e) => setCountry(e.target.value)}
              renderValue={(value) => <FlagEmoji iso2={value} style={{ display: 'flex' }} />}
            >
              {defaultCountries.map((c) => {
                const country = parseCountry(c);
                return (
                  <MenuItem key={country.iso2} value={country.iso2} sx={{ backgroundColor: 'neutral.white', my: 0.5 }}>
                    <FlagEmoji iso2={country.iso2} style={{ marginRight: 8 }} />
                    <Typography marginRight={1}>{country.name}</Typography>
                    <Typography color="gray">+{country.dialCode}</Typography>
                  </MenuItem>
                );
              })}
            </Select>
          </InputAdornment>
        ),
        endAdornment: adornmentProps,
      }}
    />
  );
};

export default memo(FormikPhone);

[ybrusentsov]

@organroman Hey, you can create a value without formatting like this:

const unformattedPhone = `+${phone.replace(/\D/g, '')}`; // remove non digits and add "+" to beginning
// phone - is a value that you get from usePhoneInput (value from input)