---
name: browser-react-autocomplete-fill
description: Заполнение React-автокомплитов (Downshift/React-Select) в браузере, когда стандартные browser_type/browser_click не работают. Использовать вместо попыток кликать по combobox.
tags: [browser, react, autocomplete, devtools, workaround]
---

# Browser React Autocomplete Fill

React-компоненты автокомплита (Downshift, react-select, custom) часто не реагируют на стандартные browser_type/browser_click, потому что они слушают React-синтетические события, а не нативные.

## Проблема
- `browser_type` вводит текст, но автокомплит не показывает опции
- `browser_click` на combobox не раскрывает меню
- Accessibility tree показывает combobox, но `aria-controls` listbox пуст
- Кастомные компоненты не используют нативные `<select>` — нет `<option>` элементов

## Решение: NativeInputValueSetter

```javascript
// 1. Найти нужный input (по placeholder, классу, индексу)
const inputs = document.querySelectorAll('.AutocompleteField_searchInput__pbc5v');
const input = inputs[0]; // нужный индекс

// 2. Сфокусировать
input.focus();

// 3. Установить значение через нативный сеттер (React не реагирует на прямую установку value)
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, 'value'
).set;
nativeInputValueSetter.call(input, 'Искомое значение');

// 4. Диспатчить React-событие 'input' с bubbles: true
input.dispatchEvent(new Event('input', { bubbles: true }));
```

## Выбор опции из выпадающего списка

```javascript
// Дождаться появления опций
await new Promise(resolve => setTimeout(resolve, 1500));

// Найти listbox по ID (обычно: 'make-menu', 'primary-category-menu', 'second-category-menu')
const lb = document.getElementById('make-menu'); // или 'primary-category-menu'
const option = lb.querySelector('[role="option"]'); // первая опция
// или найти по тексту:
// const option = Array.from(lb.querySelectorAll('[role="option"]'))
//   .find(o => o.textContent.trim() === 'Нужное значение');
if (option) option.click();
```

## Поиск категорий/опций в исходниках страницы

Если опции не видны в DOM (загружаются лениво или из API):

```javascript
// Поиск в HTML страницы всех возможных значений
const html = document.documentElement.innerHTML;
// Ищем по ключевым словам
const idx = html.indexOf('"category-1"');
const data = html.substring(idx, idx + 2000);
```

## Поиск элементов автокомплита

```javascript
// Найти все input автокомплитов
const inputs = Array.from(
  document.querySelectorAll('.AutocompleteField_searchInput__pbc5v')
);

// Поиск по placeholder
const cat1 = inputs.find(el => el.placeholder === 'Category 1 (Primary)');
const subcat = inputs.find(el => el.placeholder === 'Subcategory');
const make = inputs.find(el => el.placeholder === 'Search vessel make');
```

## Поиск listbox по ID

Паттерн ID listbox: `{тип}-category-menu` или `{тип}-subcategory-menu`

- `primary-category-menu` — основная категория
- `primary-subcategory-menu` — подкатегория
- `second-category-menu` — категория 2
- `make-menu` — производитель
- `model-menu` — модель

## Проверка, открыт ли disabled input

```javascript
const input = document.querySelector('...');
console.log('disabled:', input.disabled, 'value:', input.value);
```

## Сохранение изменений

После заполнения — найти и кликнуть кнопку Save:

```javascript
document.querySelector('button.Button_root_primary-blue__EA_CG')?.click();
```
