better-dateinput-polyfill icon indicating copy to clipboard operation
better-dateinput-polyfill copied to clipboard

Adds eventlistener support via document.createEvent

Open jeremyblalock opened this issue 4 years ago • 1 comments

Addresses: https://github.com/chemerisuk/better-dateinput-polyfill/issues/134

Problem

As mentioned in the issue, you currently can't listen for changes on a polyfilled input. This is problematic if you're using React and other frameworks, since the React state & the state of the input will get out of sync.

Solution

I have added a few lines of code to trigger an event that will closely mirror the event that would come from an actual date input in Chrome / Firefox.

  • I have chosen to use the older document.createEvent interface, since it has wider support with browsers that are lacking the date input, and it has better compatibility with React
  • I have tested this with React, as well as a vanilla input.addEventListener, and both worked successfully.

jeremyblalock avatar Jun 08 '21 16:06 jeremyblalock

Note: I have already published this change here for my personal use: https://www.npmjs.com/package/@inventora/better-dateinput-polyfill

Feel free to test using that version. I am merely contributing this back because it was useful to fix my issue, and I thought others could benefit!

jeremyblalock avatar Jun 08 '21 16:06 jeremyblalock