I have TMA (Telegram Mini Application), on the seller details block I have a button using which the user can make a call by seller number.

Problem: When the user clicks on the phone number button to call a seller automatically opens the phone app without the already entered phone number.

My current working solution for IOS:

const handleCall = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/D/g, '');
  if (phoneNumber) window.open(`tel:+${phoneNumber}`);
  else console.error('Invalid phone number');
};

<Button onClick={handleCall} size='large' variant='primary'>
   Make a call
</Button>

Unfortunately, this solution doesn’t work on Android (actually it opens the phone app without already entering the phone number).

I’ve already tried solutions like these:

Encoding phone number (doesn’t work on any OS)

const handleCallDefault = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/D/g, '');

  if (phoneNumber) {
    const formattedNumber = `+${phoneNumber}`;
    const encodedNumber = encodeURIComponent(formattedNumber);

    window.open(`tel:${encodedNumber}`, '_blank', '_system');
  } else {
    console.error('Invalid phone number');
  }
};

Object window.location.hef

const handleCallUtilsWindowLocation = () => {
  const phoneNumber = detailUserInfo.phone.trim().replace(/D/g, '');

  if (phoneNumber) {
    const formattedNumber = `+${phoneNumber}`;
    const encodedNumber = encodeURIComponent(formattedNumber);

    window.location.href = `tel:${encodedNumber}`;
  } else {
    console.error('Invalid phone number');
  }
};

Next.js Link component (works for IOS)

<Link href={`tel:+${detailUserInfo.phone}`} target='_blank'>
  Make a call
</Link>

Anchor tag <a href>

<a href={`tel:+${detailUserInfo.phone}`} target='_blank'>
  Make a call
</Link>

Any of this options doesn’t works correctly in Telegram webview, but it works in browser.
Thanks in advance for any recommendation