Telegram-Mini-Apps / telegram-apps

Made from scratch TypeScript packages, examples and documentation you will surely need to start developing on Telegram Mini Apps.
https://docs.telegram-mini-apps.com/
MIT License
639 stars 175 forks source link

[Bug]: #449

Closed chinatransfer closed 2 months ago

chinatransfer commented 2 months ago

Telegram Application

Telegram for Android, Telegram for iOS, Telegram for macOS, Telegram Desktop

Describe the Bug

https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk/components/main-button#active-state

const mainButton = useMainButton() useEffect(() => { if (mainButton) { mainButton.setText('hello world') .on('click', () => { alert(mainButton.isEnabled) }) mainButton.show() mainButton.disable() } }, [mainButton]);

To Reproduce

you set disabled and the on-click event still works

Expected Behavior

The button becomes inactive and events do not work

heyqbnk commented 2 months ago

Could you format your code, so I could understand the problem? It also seems incomplete

chinatransfer commented 2 months ago
  const mainButton = useMainButton()
  useEffect(() => {
    if (mainButton) {
      mainButton.setText('hello world')
        .on('click', () => {
        alert('hello')
      })
      mainButton.show()
      mainButton.disable()
    }
  }, [mainButton]);
heyqbnk commented 2 months ago

Can't reproduce the problem. Could you provide a repo, where the problem exists?

chinatransfer commented 2 months ago

https://github.com/user-attachments/assets/ef21d058-ca5e-4d38-9f97-204535bcc7a2


import {useMainButton} from "@telegram-apps/sdk-react";
import {useEffect} from "react";

const TestPage = () => {
  const mainButton = useMainButton()
  const clickHandler = () => {
    alert('hello world')
  }
  useEffect(() => {
    if (mainButton) {
      mainButton?.setText('hello world')
        .on('click', clickHandler)
      mainButton?.show()
      mainButton?.disable()
      console.log(mainButton?.isEnabled) // false
    }

    return () => {
      if (!mainButton) return;
      mainButton?.hide();
      mainButton?.off('click', clickHandler);
      mainButton?.disable();
      mainButton?.setText('');
    };
  }, [mainButton]);

  return (
    <div>

    </div>
  );
};

export default TestPage;
heyqbnk commented 2 months ago

Could you enable debug mode in your index file and show logs related to web_app_setup_main_button?

import { setDebug } from '@telegram-apps/sdk-react';

setDebug(true);

If I got it right, you are using the macOS version of Telegram, right?

chinatransfer commented 2 months ago
[Log] 08:29:14.588 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: false

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.591 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: true

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.591 / SDK – "Posting event:" – Object (bundle.js, line 78865)
Object
[Log] false (bundle.js, line 6881)
[Log] 08:29:14.592 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: false

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.592 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: false

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.592 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: false

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.593 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: true

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

Prototype Object
[Log] 08:29:14.593 / SDK – "Posting event:" (bundle.js, line 78865)
Object

data: Object

color: "#2ea6ff"

is_active: false

is_progress_visible: false

is_visible: true

text: "hello world"

text_color: "#ffffff"

Prototype Object

event: "web_app_setup_main_button"

[Log] 08:29:59.418 / SDK – "Event received:" – {name: "main_button_pressed"} (bundle.js, line 78865)
[Log] 08:30:03.324 / SDK – "Event received:" – {name: "main_button_pressed"} (bundle.js, line 78865)

you are right this error in my telegram on mac OS 10.2.1.254873 AppStore

chinatransfer commented 2 months ago

I checked, as well as on the latest version downloaded from the site 11.0.2.267159 Stable

heyqbnk commented 2 months ago

Well, it is on the Telegram's side then. Should wait for the client fix