[Bug]:

[chinatransfer]

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]

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

[chinatransfer]

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

[heyqbnk]

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

[chinatransfer]

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]

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]

[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]

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

[heyqbnk]

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