Closed matt-psaltis closed 6 years ago
This was pretty frustrating to fix, but I managed to come up with the following work around that played nicely with redux form.
cy
.get('#dateField')
.click()
.then(input => {
input[0].dispatchEvent(new Event('input', { bubbles: true }))
input.val('2017-04-30T13:00')
})
.click()
@barryskal I tried your solution. It works fine in the way that I can see my intended date in the input field, however just clicking save after that always takes the older/default date. If only I make any changes to the date by up/down arrow MANUALLY then the date change is accepted. Do you know what might be causing it and how to resolve it.
I'm looking into this as part of the #1241 cy.type()
epic. I'll let you know if a fix for this is coming up in the next patch release
@cypressProj I am going to make a wild guess here, and assume you use ReactJS. I had the same issue you described. I figured that this was caused by React, because we are using React controlled inputs.
This Stackoverflow answer pointed me in the right direction: https://stackoverflow.com/a/46012210/1221091
My code:
support/setDate.js
export default (input, value) => {
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeInputValueSetter.call(input, value);
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
};
And then I use it like this:
import setDate from 'support/setDate';
cy.get('@key_dropoff_at')
.then(input => setDate(input[0], '2018-12-12T00:00'));
This Stackoverflow answer pointed me in the right direction: stackoverflow.com/a/46012210/1221091
@DiederikvandenB you shouldn't need to do this since #2016, we now call the native value method, shown here https://github.com/cypress-io/cypress/blob/decaf-issue-311/packages/driver/src/cy/commands/actions/type.js#L322
@Bkucera Thank you so much for that!
@cypressProj I am going to make a wild guess here, and assume you use ReactJS. I had the same issue you described. I figured that this was caused by React, because we are using React controlled inputs.
This Stackoverflow answer pointed me in the right direction: https://stackoverflow.com/a/46012210/1221091
My code:
support/setDate.js
export default (input, value) => { const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set; nativeInputValueSetter.call(input, value); const event = new Event('input', { bubbles: true }); input.dispatchEvent(event); };
And then I use it like this:
import setDate from 'support/setDate'; cy.get('@key_dropoff_at') .then(input => setDate(input[0], '2018-12-12T00:00'));
Thank you, it works!
Current behavior:
The input field doesn't update with a value when you type in text
Desired behavior:
The value should appear in the input
How to reproduce:
Test code:
Typescript:
Additional Info (images, stack traces, etc)
I can see from the log it correctly "yields" the input element. It just doesn't visually display anything in the input box (when the type command executes).