Extend the Task EnterTheDate to work cross-browser

[craigfowler]

Cross-browser testing had demonstrated that the logic of the task which works in Chrome does not work in all target browsers.

This ticket is to add functionality to the Task so that it works across all browsers.

[craigfowler]

Investigation

I took a look into browser behaviours, via some tests and searching the web.

• Chrome works just fine with SendKeys (confirmed via tests)
• Edge works the same as Chrome (confirmed via tests)
• Safari 26.2 cannot use SendKeys to update the element (confirmed via tests)
• Safari 17.3 cannot use SendKeys to update the element (confirmed via tests)
• Firefox (any version) cannot use SendKeys to update the element (confirmed via tests)

Safari 17.3 and 26.2 both behave in the same manner here. Any keys you send to the element have no effect at all. The existing value in the control is unchanged.

Firefox behaves slightly differently. Any attempt to use SendKeys will clear the element's contents, removing any existing value and setting the value to empty string.

Outcomes

Safari and Firefox both require date fields updating via JavaScript. So, I will need these two classifications of browser to be marked with a Quirk. Then, browsers with that quirk will need to use a JS workaround to set the date.

[craigfowler]

I might have the body of a working fix in the pull request. But, before I complete it, I must ensure that I check on the events etc that would be fired when the input value is updated by a human.

For example, I should manually fire the change event to ensure that other browser functionality works as expected.

[craigfowler]

Here's an AI-generated recommendation for consideration. Note that this is AI generated and might be nonsense!

Complete Pattern

Many practitioners use this sequence:

1. Focus the element first - element.focus()
2. Set the value - element.value = 'your-date'
3. Fire input event - for frameworks like React/Vue that watch input
4. Fire change event - for traditional change handlers
5. Blur the element - element.blur() to simulate leaving the field

Framework-Specific Considerations

React

React uses synthetic events and attaches listeners to specific properties. You may need:

// React 16+
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, 
  "value"
).set;
nativeInputValueSetter.call(element, 'your-date');
element.dispatchEvent(new Event('input', { bubbles: true }));

Angular

Usually responds well to standard input and change events with bubbles: true.