telegram-mini-apps/issues

Centralised storage of platform issues and enhancement proposals.

issues's Issues

Event `web_app_set_background_color` works incorrectly

Describe the bug
It seems like web_app_set_background_color works incorrectly on Android. In case, you call this method, visually, nothing happens. But if you close this Web App and open again, you will see set color unless application is loaded.

Firstly, set color should probably be dropped when application was closed. Secondly, could we make WebView background transparent to make it work as expected? I mean, we would like HTML body to be transparent to see previously specified color, is it possible?

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps polygon bot (source code)
2. Open developers tools
3. Call Web Apps method:

bridge.postEvent('web_app_set_background_color', {color: '#ffffff'});

4. See no changes in background even when body has no color specified
5. Close application
6. Open application again. See white background color when application is loading
7. When application is loaded, specified color disappears

Expected behavior
Background color is being set with color specified in method. Specified color is dropped when application was closed.

Webapp storage clod storage

Linux desktop / android phone

Store a json string from webapp api
Launched from bottom keyboard
That is created by arduino esp8266

To me strange that the
Web storage cloud storage max 1024 key data

Also can be changed if webapp is launched from other places
Unlike web app send data

https://t.me/ESP8266_Arduino_Telegran/75?single

Events `web_app_set_header_color` and `web_app_set_background_color` have no effect

Describe the bug
No effect when posting web_app_set_header_color and web_app_set_background_color events. There are no visual changes and changes in DOM.

To Reproduce
Steps to reproduce the behavior:

1. Open Sandbox
2. Open console
3. To test header color change, try both of the scripts:

WebView.postEvent('web_app_set_header_color', {color_key: 'secondary_bg_color'})

or

WebView.postEvent('web_app_set_header_color', {color_key: 'bg_color'})

4. To test background color change, try this script:

WebView.postEvent('web_app_set_background_color', {color: '#ffffff'})

5. See no changes in header and background colors

Expected behavior
Colors change right after event posting.

The window.Telegram.WebApp.expand() Method Fails to Expand App to Full Height.

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

window.Telegram.WebApp.expand() doesn't expand app to full height. After calling .expand() method, there is a gap between tab header and upper border of the screen. Additionally, it's still possible to drag the tab upwards to increase its height, which indicates that the expansion is not complete.

To Reproduce

Steps to reproduce the behavior:

1. Open @nb_bottle_bot from ios
2. Open mini-app by clicking the menu button
3. Click on input, to open OSK
4. Close mini-app
5. Open it again
6. Observe that the app is not expanded to its full height. Notice that while the viewport height appears correct, the entire tab containing the mini-app is positioned lower than it should be. This is further indicated by the ability to drag the tab upwards, which should not be possible.

Expected behavior

The window.Telegram.WebApp.expand() method is expected to fully expand the mini-app to the maximum available height.

Video

What happens on the video:

1. Open mini-app from @nb_bottle_bot
2. It expands, but not on full height
3. I drag it to the top
4. It expands to full height

2023-12-11.13.55.58.mp4

Input type time no timepicker on linux dektop ok on android phone

Platform

Linux mint x86 64 desktop

• [x ] Telegram Desktop linux mint x86 64

Input type time
no timepicker on linux dektop
ok on android phone

https://t.me/LuberthDijkmanbot/schedule

https://ldijkman.github.io/async-esp-fs-webserver/ino/thermostat_web_flash/Telegram_WebApp/Telegram_WebApp.html

Video
https://t.me/Luberth_Dijkman/86

No timepicker on input type time in telegram miniapp webapp
Ok in chromium website

New docs routing doesn't work

Routing of new documentation throws a 404 error when reloading the page

https://docs.telegram-mini-apps.com/about-platform

Incorrect viewport height on Android devices

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

I am developing Telegram Mini app using Next.JS framework with App router. I am using @tma.js/sdk-react package. And there is an issue on every Android device. When you open mini app via Menu button, bottom part of it is hidden under user message input. Like on the image, on the left side.

To Reproduce

Steps to reproduce the behavior:

1. Open mini app

Expected behavior

I want the mini app to open with correct viewport height.
May be I am doing something wrong?

Events `web_app_request_theme` and `web_app_request_viewport` don't work as expected

Describe the bug
Events web_app_request_theme and web_app_request_viewport do not return information about current theme and viewport. Unlike iOS and Android, desktop and web versions of Telegram do not emit such events as theme_changed and viewport_changed. There is just no reaction on these events.

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps Polygon bot (bot source code)
2. Open console
3. Use script which returns theme and viewport information:

bridge.postEvent('web_app_request_theme');
bridge.postEvent('web_app_request_viewport');

4. See no received events in console.

Expected behavior
The same behavior on all platforms - emit of events theme_changed and viewport_changed with correct parameters.

Do not automatically show application, when its static files are loaded

Is your feature request related to a problem? Please describe.
According to official documentation (method ready()), we should call function ready() in case, when application is ready to be shown. Additionally, description of method says:

It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Web App is shown.
If the method is not called, the placeholder will be hidden only when the page is fully loaded.

The problem is application will be displayed even in case, when it did not notify native app about it is ready to be displayed. In other words, when all static files of application are loaded, it will be shown automatically, but at this time, there could be some async operations which were trying to receive required theme parameters of application. As a result, this will lead to application "flashes" as long as theme params could change on-flight.

Describe the solution you'd like
Do not display application automatically. Make ready() function the only one explicit way of hiding application placeholder, because it leads to not resolvable problems.

Describe alternatives you've considered

-

Additional context

-

When switching to miniapp, the old miniapp cannot pop up the soft keyboard about The ton wallet

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

Why does the old miniapp's input box fail to pop up the soft keyboard after closing another miniapp

To Reproduce

Steps to reproduce the behavior:

1. open miniapp 'one'
2. Jump to miniapp 'two' in miniapp one
3. close miniapp 'two'
4. Click on the input box in miniapp one

Expected behavior

Pop up soft keyboard！

142ff2e9017c318ee4b7b-914b95719bfa86405e.mp4

Incorrect viewport shift when OSK is open

Platform

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

There is an unexpected gap between the on-screen keyboard and the input field within a Telegram Mini App when the keyboard is active. The input field is intended to be positioned at the bottom of the screen, but upon activating the OSK, there is a visible space separating the two, which is not consistent with the expected UI layout.

To Reproduce

Steps to reproduce the behavior:

1. Open @nb_bottle_bot in telegram on ios
2. Open mini app by clicking the menu button
3. Focus on the input field to bring up the iOS on-screen keyboard.
4. Observe that there is a gap between the bottom of the input field and the top of the on-screen keyboard.

Expected behavior

The expected behavior is that when the on-screen keyboard is activated, the input field should align directly above the keyboard without any noticeable gaps.

Display placeholder during Web App loading

Is your feature request related to a problem? Please describe.
Currently, when Web App is loading, Telegram application does not display any loader. The only one thing user sees is a WebView with white background and missing content . To let user know that application is loading, Telegram application should display loader instead of white WebView. I saw loader in bottom right of shown popup, but white WebView breaks any sense of native application which Web App should look like.

Describe the solution you'd like
To make it look the same on all platforms, you could see how it works in macOS version of Telegram:

I also provide some tip from official Telegram documentation about how loader hiding should work. Taken from description of web_app_ready method logic.

A method that informs the Telegram app that the Web App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Web App is shown.

Describe alternatives you've considered
You can find good solution made by Telegram macOS developers.

Additional context
-

`main_button_pressed` event is still being received when button is not active

Describe the bug
In case, main button was set inactive via web_app_setup_main_button method, event main_button_pressed is still being sent. It is worth mentioning, that visually, button becomes inactive, but its functional part works incorrectly.

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps polygon bot (source code)
2. Open developers tools (F12)
3. Call Web Apps method:

bridge.postEvent('web_app_setup_main_button', {
  is_visible: true,
  is_active: false,
  is_progress_visible: false,
  text: 'TEXT',
  color: '#ff0000',
  text_color: '#00ff00',
});

4. Tap appeared main button
5. See console message in format [...] [Bridge] [processEvent] main_button_pressed undefined. It means, application received main_button_pressed event.

Expected behavior
Event main_button_pressed is not being sent in case, button is inactive.

Native app appends style tag each time, night mode changes

Describe the bug
Every time, we switch night mode, native app automatically appends its own style tag:

To Reproduce
Steps to reproduce the behavior:

1. Open Sandbox. Enable developer mode and watch for head tag changes
2. Go to Telegram settings and switch Night Mode several times
3. Now head tag contains a lot of almost the same style tags

Expected behavior
It seems that native app appends style tag with styles according to current theme, but it looks like the correct way is not to always append new style tag, but replace last one added. Otherwise, elements become flooded with same CSS rules.

`popup_closed` event payload has different values on all platforms in case, it was closed due to click outside or by clicking the popup cross

Describe the bug
Each platform sends different values in popup_closed event payload.

Android: {}
Desktop: undefined
iOS: null
Web: { button_id: { isTrusted: true } }

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps polygon bot (source code)
2. Open developers tools (F12)
3. Show popup with this script:

bridge.postEvent('web_app_open_popup', {
    title: 'Title',
    message: 'Message',
    buttons: [{type: 'ok', id: 'ok'}]
})

4. Close popup with click outside. In case, click outside close is not available (on desktop platforms), close popup by clicking top right popup cross.
5. Event payload will differ depending on current platform

Expected behavior
Event payload is the same on all platforms.

Telegram Web incorrectly reloads Mini App

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

Web version of Telegram does not really reloads Mini App iframe, but instead, it re-inserts it. The reason is Telegram Web has no access to iframe location and is not able to reload it.

The second problem here is Telegram Web is also unable to reload it saving current application location. So it just drops window.location to the initial one, which leads to loss of application routing state.

Here is the original issue: Ajaxy/telegram-tt#282

Incorrect behavior of "viewport_changed" event on iOS

Describe the bug
According to official documentation of viewport_changed event, it should send actual height of visible area of Web App. Currently, we get it with 1 exclusion - in case, when this height is less than some minimal value (for me it was 481px), native device sends it instead of visible area height.

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps polygon bot (source code)
2. Try dragging application modal almost to the bottom of the screen
3. Open eruda console (bottom right cog in application interface)
4. See viewport_changed events where height is not less than some fixed value, but should be close to 0.

Expected behavior
Strongly following documentation, event should contain height of visible area.

Test payments doesn't pass

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

While developing TMA with payment integration (in fiat) - faced next issue. All payments (test & live) just hangs and then throw error.

Both methods createInvoiceLink() and sendInvoice() correctly generate invoice link/ invoice. The problem is when in Invoice element button "pay" clicked.

I'm located in Minsk, Belarus. Tried different VPN and payment providers.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Test payments should passed successfully

A clear and concise description of what you expected to happen.

`web_app_setup_closing_behavior` does not work in some cases

Describe the bug
According to web_app_setup_closing_behavior method documentation, it should prevent user from losing important information in case, Web App is going to close.

Nevertheless, this method does not work correctly in iOS and Android. iOS, probably, implemented it a bit better. Application does not allow opening bot and chat information which could lead to Web App close somehow. For example, when user clicks some link in attachments or something like that. It just doesn't allow doing a lot of actions. Android works a bit different, it allows doing that which may lead to Web App close.

iOS and Android

Method does not work in case, user presses Menu Button, it just closes the Web App without showing confirmation dialog. The Web App will also be force closed in case, user pressed chat message input.

Android only

Method does not work in case, when Web App is minimized and user presses back button on the left from bot avatar. It closes Web App without confirmation dialog.

To Reproduce
Steps to reproduce the behavior:

1. Open Web Apps polygon bot (source code)
2. Open developers tools
3. Call Web Apps method:

bridge.postEvent('web_app_setup_closing_behavior', {
  need_confirmation: true,
});

4. Try steps described in first section and see incorrect behavior.

Expected behavior
Telegram application shows confirmation dialog in case, user or application action is going to close Web App. It probably should
also work in case, app calls web_app_open_link and similar methods.

Transfer telegram-mini-apps-dev/awesome-telegram-mini-apps to this org

I personally think that telegram-mini-apps/awesome-telegram-mini-apps would be a way catchier name for the awesome list, and would like to have it under that if both sides agree on it.

When the HTML attributes accept and multiple are used simultaneously, the @change event does not fire in Vue3 project

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Code example

<template>
  <input type="file" name="files[]" accept="image/*" multiple @change="uploadFile" />
</template>

<script>
function uploadFile() {
  console.log('Upload File')
}
</script>

Describe the bug

When the HTML attributes accept and multiple are used simultaneously in Vue3 project, the change event does not fire on Android.

To Reproduce

Steps to reproduce the behavior:

1. Go to 'Choose File'.
2. Click on 'Choose File'.
3. Select some image file/files, click OK button.
4. Nothing happens, change event doesn't fires up, there is no console.log output in console.

Expected behavior

Console.log output 'Upload File' text in console.

`viewport_changed` event is not being sent when main button becomes visible or hidden

Describe the bug
In case, main button became visible or hidden, native app does not send viewport_changed event even in case, viewport really changed. On client side you should always track resize event and update current viewport data which seems implicit.

To Reproduce
It will be a bit harder for me to show how to reproduce this problem as long as I can't use libraries and examples I provided before because they already close this problem locally. The only thing I could help you here with is to provide minimal code HTML example which shows the problem:

<html>
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/@twa.js/[email protected]"></script>
</head>
<body>
<script>
  const {defineEventReceiver, postEvent} = window.TwaBridge;
 
  // Define event receiver which will allow us to handle native app events.
  defineEventReceiver();
 
  // Add message event handler to display event received from native app.
  window.addEventListener('message', e => {
    if ('eventType' in e.detail) {
      console.log('Received event:', e.detail);
    }
  });
 
  // Log app height before showing main button.
  console.log(window.innerHeight);
 
  // Show main button.
  postEvent('web_app_setup_main_button', {
    is_visible: true,
    is_active: true,
    is_progress_visible: false,
    text: 'TEXT',
    color: '#ff0000',
    text_color: '#ffffff',
  });
 
  // After some timeout show new app height.
  setTimeout(() => {
    console.log(window.innerHeight);
  }, 1000);
</script>
</body>
</html>

To check if external events handling works correctly, you could press main button and see log message in console.

Expected behavior
Event viewport_changed is sent every time, its height or other parameters changed.

Viewport height is incorrect on ios, when on-screen keyboard is opened

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

window.Telegram.WebApp.viewportHeight returns incorrect value when on-screen keyboard(OSK) is opened. The value doesn't change either the OSK is opened or not.

To Reproduce

Steps to reproduce the behavior:

1. Open @nb_bottle_bot from ios
2. Open mini-app by clicking the menu button
3. Click on input and check the window.Telegram.WebApp.viewportHeight value. It shows the same size as if OSK wasn't open.

Expected behavior

window.Telegram.WebApp.viewportHeight returns correct visual viewport height