laravel / dusk

Laravel Dusk provides simple end-to-end testing and browser automation.
https://laravel.com/docs/dusk
MIT License
1.87k stars 320 forks source link

Laravel Dusk doesn't trigger on @input when attached to <select> only on @change when using Vue #1075

Closed robertmylne closed 7 months ago

robertmylne commented 8 months ago

Dusk Version

7.12

Laravel Version

10.35

PHP Version

8.1

PHPUnit Version

10.5

Database Driver & Version

No response

Vue Version

3.3.4

Description

I have a custom Vue Select component.

<template>
    <select
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        :id="id"
        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 disabled:cursor-not-allowed disabled:bg-gray-50 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
    >
        <slot></slot>
    </select>
</template>
<script setup>
defineProps(['modelValue', 'id'])
defineEmits(['update:modelValue'])
</script>

In another view I have:

<Select v-model="data.size" id="size" :disabled="loading">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</Select>

When I run this Dusk code:

$browser->select('@companySize')

It changes the select visually, but it does not actually trigger Vue to set the value (this does work outside of dusk). However if I change the Select component to use @change instead of @input it does set the value in Vue.

Just changing the select to use @change might seem like it fixes the issue. However, this doesn't allow select fields to utilize live reloading data on change @input (as the select would need to lose focus @change to set in Vue).

Steps To Reproduce

Create the supplied Select component. Test with @input and @change and see that @input does not set the value in Vue. You can log the value by pressing a button with Dusk after.

Notes: Using latest Vue v3.

github-actions[bot] commented 8 months ago

Thank you for reporting this issue!

As Laravel is an open source project, we rely on the community to help us diagnose and fix issues as it is not possible to research and fix every issue reported to us via GitHub.

If possible, please make a pull request fixing the issue you have described, along with corresponding tests. All pull requests are promptly reviewed by the Laravel team.

Thank you!

driesvints commented 7 months ago

Closing this issue because it's inactive, already solved, old or not relevant anymore. Feel to open up a new issue if you're still experiencing this.