Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Button remains unclickable after disabled state changes

オープン
  • 何か問題がありますか？
#491 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

@MoOx がすでに取り組んでいます。

2026年6月1日 から。

  • #492 @MoOx による — オープン

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
62/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
android, javascript, react, react-native
領域
frontend, mobile-dev

調査の方向性

提供されている html.button の Android 再現から始め、disabled 状態の処理を React Native Pressable と比較します。Android の実装を追跡し、disabled を true から false に戻す切り替えの回帰テストを追加します。完了条件は、ボタン自体とその子要素が再び押下に反応することです。

索引モデルが issue の本文から書いたものです。

説明

bug
Describe the issue

On Android if html.button state is set to disabled and then back to enabled the pressable itself remains unclickable, while it's children are clickable as expected. As with other similar issues in React Native a workaround is to set a key based on disabled state, but this issue doesn't seem to come from React Native, as it doesn't happen in React Native.

On iOS the button regains clickability as expected.

Expected behavior

Like on iOS, the pressable on Android should become clickable when the disabled state changes back to false.

Steps to reproduce

Platform: Android
OS version: 16.0 ("Baklava"); API 36.0
React version: 19.2.3
React Native version: 0.85.3
RSD version: 0.0.55

  1. Use the below example:
import { useState } from "react";
import { Button, Pressable, Text, View } from "react-native";
import { css, html } from "react-strict-dom";

export default function RootLayout() {
  const [buttonDisabled, setButtonDisabled] = useState(false);
  const [rnPresses, setRnPresses] = useState(0);
  const [rsdPresses, setRsdPresses] = useState(0);

  return (
    <View
      style={{ flex: 1, backgroundColor: "white", alignItems: "center", justifyContent: "center" }}
    >
      <Button
        title={"Toggle button disabled - now: " + buttonDisabled.toString()}
        onPress={() => {
          setButtonDisabled((prev) => !prev);
        }}
      />
      <View>
        <Text>RN Pressable - {rnPresses} presses</Text>
        <Pressable
          disabled={buttonDisabled}
          style={({ pressed }) => [
            { backgroundColor: "lightgreen", padding: 16 },
            pressed && { opacity: 0.5 },
          ]}
          onPress={() => {
            setRnPresses((prev) => prev + 1);
          }}
        >
          <Text style={{ backgroundColor: "black", color: "white", padding: 8 }}>Press me</Text>
        </Pressable>
      </View>
      <View>
        <Text>RSD Button - {rsdPresses} presses</Text>
        <html.button
          disabled={buttonDisabled}
          style={styles.button}
          onClick={() => {
            setRsdPresses((prev) => prev + 1);
          }}
        >
          <html.span style={styles.buttonText}>Press me</html.span>
        </html.button>
      </View>
    </View>
  );
}

const styles = css.create({
  button: {
    backgroundColor: "lightblue",
    opacity: {
      default: 1,
      ":active": 0.5,
    },
    padding: 16,
  },
  buttonText: {
    backgroundColor: "black",
    color: "white",
    padding: 8,
  },
});
  1. Run the app on Android device/emulator
  2. Verify that, for both RN and RSD cases, both pressable and it's children trigger press event (press count increases)
  3. Toggle button disabled state to true
  4. Toggle button disabled state to false
  5. Verify that for RN case both pressable and children regained clickability, while in RSD case only the label can be clicked to trigger an event
Test case

No response

Additional comments

No response

主要言語
JavaScript
スター
3.6k
フォーク
208
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react/react-strict-dom のほかの issue

react/react-strict-dom の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。