question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Provide original DOM event to onChange

See original GitHub issue

Is your feature request related to a problem? Please describe.

I want to have some kind of inline edit behavior, where the user can click on a date, which will open a popover containing an autofocused DateTextField with keyboard entry and a picker icon. Once the user has finished choosing a date, I would like to close the popover.

image

Context:

  • I can only rely on onChange for that.
  • onChange is fired when a date is selected using the picker and when the TextField is blurred.

Problem : I would like to autofocus the TextField once the popover open. But then, if the user clicks on the picker icon, the TextField loses focus and an onChange event is emitted.

Describe the solution you’d like

If I had the original DOM event as a second argument to onChange(date, ev), I would be able to discriminate between:

  • clickdown, keydown (for enter and escape) which should submit the change
  • blur which shouldn’t.

Describe alternatives you’ve considered

  • Only allow keyboard entry? Not ideal.
  • Do not autofocus? Not ideal either, and the behavior will happen anyway if the user focuses the textfield before clicking on the picker icon.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
oliviertassinaricommented, Nov 26, 2019

+1 for always providing the event as the first argument to any user facing event prop handler.

1reaction
charlaxcommented, Apr 13, 2019

I’m sorry, not obvious?

On Sat 13 Apr 2019 at 16:59, Dmitriy Kovalenko notifications@github.com wrote:

No we can’t 😃 This will be not obvious.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dmtrKovalenko/material-ui-pickers/issues/974#issuecomment-482816810, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHWtYet0VbZiIZ-nwcrw0AaLiZQp9TAks5vgfDOgaJpZM4ccDJQ .

Read more comments on GitHub >

github_iconTop Results From Across the Web

Emulating DOM onchange behavior in React - Stack Overflow
The React onChange event acts like the DOM oninput event, firing every time a key entry is made, rather than when the entry...
Read more >
HTML DOM onchange Event - GeeksforGeeks
The HTML DOM onchange event occurs when the value of an element has been changed. It also works with radio buttons and checkboxes...
Read more >
onchange Event - W3Schools
The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the...
Read more >
JavaScript change Event
Using JavaScript change event for the select element​​ The <select> element fires the change event once the selection has completed. How it works:...
Read more >
Event Handling - Vue.js
Sometimes we also need to access the original DOM event in an inline handler. ... To address this problem, Vue provides event modifiers...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found