56 lines
2.2 KiB
Markdown
56 lines
2.2 KiB
Markdown
# React Input Fix for CDP (Chrome DevTools Protocol)
|
||
|
||
TokenHarbor (и многие другие React-приложения) не реагируют на прямое присваивание `input.value = 'x'`.
|
||
React отслеживает изменения через свой дескриптор свойства `value` на `HTMLInputElement.prototype`.
|
||
|
||
## Рабочий паттерн
|
||
|
||
```javascript
|
||
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)
|
||
|
||
```python
|
||
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 для посимвольного ввода |