autoreg-skills-max/skills/th-autoreg/references/react-input-fix.md

React Input Fix for CDP (Chrome DevTools Protocol)

TokenHarbor (и многие другие React-приложения) не реагируют на прямое присваивание input.value = 'x'. React отслеживает изменения через свой дескриптор свойства value на HTMLInputElement.prototype.

Рабочий паттерн

var nativeSet = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
var inp = document.querySelector('input[type="email"]');
if (inp) {
    nativeSet.call(inp, 'user@email.com');
    inp.dispatchEvent(new Event('input', {bubbles: true}));
}

В Python-коде (через CDP WebSocket)

def js(cdp, code, timeout=15):
    cdp["id"] = cdp.get("id", 0) + 1
    mid = cdp["id"]
    cdp["ws"].send(json.dumps({
        "id": mid,
        "method": "Runtime.evaluate",
        "params": {
            "expression": code,
            "returnByValue": True,
            "awaitPromise": True
        }
    }))
    # ... receive response ...

# Использование для заполнения email:
js(cdp, f"""
    var nativeSet = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype, 'value'
    ).set;
    var e = document.querySelector('input[type="email"]');
    if (e) {{
        nativeSet.call(e, '{email}');
        e.dispatchEvent(new Event('input', {{bubbles: true}}));
    }}
""")

Признаки что React НЕ принял ввод

• Кнопка "Create key" / "Submit" остаётся disabled
• Поле визуально заполнено, но форма считает его пустым
• document.querySelector('input').value возвращает правильное значение, но React-стейт не обновлён

Альтернативы (если nativeSet не помог)

1. inp._valueTracker.setValue('value') — внутренний API React
2. inp.dispatchEvent(new Event('change', {bubbles: true})) — дополнительно к input
3. inp.focus(); document.execCommand('insertText', false, 'value') — через selection API
4. Использовать Input.dispatchKeyEvent через CDP для посимвольного ввода