Cypress does not open color input on click

Current behavior:

Color palette does not appear when click input type="color" in Cypress test. However it appears when click manually in browser launched by Cypress.

Desired behavior:

Color palette appears when click at input type="color"

Test code to reproduce

https://github.com/mayenok/cypress-test-tiny

Versions

Cypress: 4.9.0 Ubuntu 18.04.4 64-bit Chromium 83.0.4103.61

[nitsan]

Also work for Angular!

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('input')

[EtienneBruines]

This workaround does not work for Vue, where the value gets overwritten as soon as Vue updates the view.

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('change')

The addition of blur did not help in this case.

cy.get('input[type=color]')
    .click()
    .invoke('val', '#ff0000')
    .trigger('change')
    .blur()

The color is updated (visually), but gets overwritten as soon as Vue updates. This happens for example when someone clicks a (submit) button.

---

<input v-model="primaryColor"
       type="color">

---

TL;DR: What does work, is triggering an input Event for Vue.

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('input')