Magnus Müller 4ce818154d Fix dropdown selection for Vue.js and reactive frameworks (#3415) (#3419)
## Summary
Fixes dropdown selections not persisting in Vue.js, React, and other
reactive frameworks. The issue was that dropdown selections appeared to
work briefly but would reset before form submission.

Closes #3415

## Root Cause
The dropdown selection handler was only dispatching `change` events, but
Vue's `v-model` directive (and React's controlled components) require
`input` events to register changes in their reactive state systems.

## Solution
Enhanced the event dispatching sequence in `default_action_watchdog.py`
to properly trigger reactive framework updates:

1. **Focus element first** - Prepares the element for interaction
2. **Set value and selected state** - Updates the DOM
3. **Dispatch `input` event** - Critical for Vue's v-model and React
controlled components
4. **Dispatch `change` event** - Standard for select elements
5. **Blur element** - Triggers validation and completes the interaction

The key insight is that the `input` event is what reactive frameworks
listen to for updating their internal state, while `change` is the
traditional browser event.

## Testing
Added comprehensive integration tests in `tests/ci/interaction/`:

### Vue.js Test (`test_dropdown_vue_submit.py`)
- Tests Vue 3 with v-model directive
- Verifies dropdown selections persist through Vue's reactive system
- Validates form submission contains correct values (both client and
server-side)
- Confirms results display correctly on page

### React Test (`test_dropdown_react_submit.py`)
- Tests React 18 with controlled components
- Verifies dropdown selections persist through React state management
- Validates form submission contains correct values (both client and
server-side)
- Confirms results display correctly on page

Both tests use real browser automation (not mocks) and validate the
complete flow from selection to submission.

## Test Results
```
tests/ci/interaction/test_dropdown_vue_submit.py::TestVueDropdownSubmit::test_vue_dropdown_selection_with_submit PASSED
tests/ci/interaction/test_dropdown_react_submit.py::TestReactDropdownSubmit::test_react_dropdown_selection_with_submit PASSED
```

## Files Changed
- `browser_use/browser/watchdogs/default_action_watchdog.py` - Enhanced
dropdown event dispatching
- `tests/ci/interaction/` - New test directory with Vue.js and React
integration tests

## Compatibility
This fix ensures compatibility with:
-  Vue.js (all versions with v-model)
-  React (controlled components)
-  Angular (reactive forms)
-  Svelte (reactive bindings)
-  Native HTML forms (backward compatible)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Ensures dropdown selections persist in Vue/React by focusing selects
and dispatching input/change/blur events, with new integration tests
validating end-to-end submission.
> 
> - **Fix**
> - Update dropdown selection logic in
`browser_use/browser/watchdogs/default_action_watchdog.py` to focus the
`select` element and dispatch `input`, `change`, and `blur` events for
native selects, improving compatibility with Vue/React reactivity.
> - **Tests**
>   - Add interaction tests in `tests/ci/interaction/`:
> - `test_dropdown_vue_submit.py`: Verifies Vue 3 `v-model` persists
selection and submits correct values.
> - `test_dropdown_react_submit.py`: Verifies React controlled
components persist selection and submit correct values.
>   - Add `conftest.py` fixture and package `__init__.py`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
95716350ef. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
2025-10-24 19:13:21 -07:00
2025-10-24 13:28:19 -07:00
2025-10-24 01:56:47 -07:00
2025-08-26 17:34:48 -07:00
2025-10-24 00:26:36 -07:00
2025-10-24 02:38:29 -07:00
2025-09-02 16:13:22 +02:00
2025-10-24 19:03:42 -07:00
2025-10-09 19:35:22 +02:00
2025-10-21 18:55:54 -07:00
2025-06-03 16:03:08 -07:00
2025-08-31 12:01:39 -07:00
2025-06-27 05:36:23 -07:00
2024-11-05 19:07:17 +01:00
2025-10-24 02:14:08 -07:00

Shows a black Browser Use Logo in light color mode and a white one in dark color mode.
The AI browser agent.


Demos Docs Blog Merch Github Stars Twitter Discord Browser-Use Cloud

🤖 LLM Quickstart

  1. Direct your favorite coding agent (Cursor, ClaudeS, etc) to Agents.md
  2. Prompt away!

👋 Human Quickstart

1. Create environment with uv (Python>=3.11):

uv init

2. Install Browser-Use package:

#  We ship every day - use the latest version!
uv add browser-use
uv sync

3. Get your API key from Browser Use Cloud and add it to your .env file (new signups get $10 free credits):

# .env
BROWSER_USE_API_KEY=your-key

4. Download chromium using playwright's shortcut:

uvx playwright install chromium --with-deps --no-shell

5. Run your first agent:

from browser_use import Agent, Browser, ChatBrowserUse
import asyncio

async def example():
    browser = Browser(
        # use_cloud=True,  # Uncomment to use a stealth browser on Browser Use Cloud
    )

    llm = ChatBrowserUse()

    agent = Agent(
        task="Find the number of stars of the browser-use repo",
        llm=llm,
        browser=browser,
    )

    history = await agent.run()
    return history

if __name__ == "__main__":
    history = asyncio.run(example())

Check out the library docs and the cloud docs for more!


Demos

📋 Form-Filling

Task = "Fill in this job application with my resume and information."

Job Application Demo Example code ↗

🍎 Grocery-Shopping

Task = "Put this list of items into my instacart."

https://github.com/user-attachments/assets/a6813fa7-4a7c-40a6-b4aa-382bf88b1850

Example code ↗

💻 Personal-Assistant.

Task = "Help me find parts for a custom PC."

https://github.com/user-attachments/assets/ac34f75c-057a-43ef-ad06-5b2c9d42bf06

Example code ↗

💡See more examples here ↗ and give us a star!


Integrations, hosting, custom tools, MCP, and more on our Docs ↗


FAQ

What's the best model to use?

We optimized ChatBrowserUse() specifically for browser automation tasks. On avg it completes tasks 3-5x faster than other models with SOTA accuracy.

For other LLM providers, see our supported models documentation.

Can I use custom tools with the agent?

Yes! You can add custom tools to extend the agent's capabilities:

from browser_use.tools import Tool

@Tool()
def custom_tool(param: str) -> str:
    """Description of what this tool does."""
    return f"Result: {param}"

agent = Agent(
    task="Your task",
    llm=llm,
    browser=browser,
    use_custom_tools=[custom_tool],
)

See our Custom Tools documentation for more examples.

Can I use this for free?

Yes! Browser-Use is open source and free to use. You only need to choose an LLM provider (like OpenAI, Google, ChatBrowserUse, or run local models with Ollama).

How do I handle authentication?

Check out our authentication examples:

  • Using real browser profiles - Reuse your existing Chrome profile with saved logins
  • If you want to use temporary accounts with inbox, choose AgentMail
  • To sync your auth profile with the remote browser, run curl -fsSL https://browser-use.com/profile.sh | BROWSER_USE_API_KEY=XXXX sh (replace XXXX with your API key)

These examples show how to maintain sessions and handle authentication seamlessly.

How do I solve CAPTCHAs?

For CAPTCHA handling, you need better browser fingerprinting and proxies. Use Browser Use Cloud which provides stealth browsers designed to avoid detection and CAPTCHA challenges.

How do I go into production?

Chrome can consume a lot of memory, and running many agents in parallel can be tricky to manage.

For production use cases, use our Browser Use Cloud API which handles:

  • Scalable browser infrastructure
  • Memory management
  • Proxy rotation
  • Stealth browser fingerprinting
  • High-performance parallel execution

Tell your computer what to do, and it gets it done.

Twitter Follow Twitter Follow

Made with ❤️ in Zurich and San Francisco
Description
Mirrored from GitHub
Readme MIT 125 MiB
Languages
Python 98%
Shell 1.4%
Dockerfile 0.4%
HTML 0.2%