2

I'm currently building a datepicker which allows people to either click on the input or use tab to show the datepicker's dropdown. Everything works for handling clicks but when I try to add also an onFocus listener it interferes with my onClick event listener.

It currently fires the onFocus and instantly fires the onClick which basically causes my dropdown to show / hide immediately when I click on the input. If I however focus the datepicker by tab it works fine.

I currently see two options for fixing, so:

  1. How can I make sure that the onFocus is only fired if it is focussed by a tab or shift+tab event.

  2. How can I make sure that the onClick handler cancels out the onFocus call if they both get fired at the same time?

NealVDV
  • 2,302
  • 3
  • 26
  • 51
  • You could throttle the events - essentially, only act upon a click or a focus event every x amount of seconds or miliseconds - I.e, if the dropdown was opened or closed less than 100ms ago, ignore the next click/focus event. It's not directly related but [this might help.](https://stackoverflow.com/questions/18177174/how-to-limit-handling-of-event-to-once-per-x-seconds-with-jquery-javascript) – Lewis Dec 08 '17 at 11:42
  • I tried this but for some reason I get `Warning: This synthetic event is reused for performance reasons.`. It seems that the event is not passed down to the function for some reason when doing this in the constructor `this.handleClick = _.debounce(this.handleClick, 100)` – NealVDV Dec 08 '17 at 11:45
  • Probably has to do with [event pooling](https://reactjs.org/docs/events.html#event-pooling). If you do not need the event, you could rewrite your `onClick` handler to not pass it on to the debounced function. – Robert Farley Dec 08 '17 at 14:10

0 Answers0