Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: "Wrap" argument documentation requires updating #730

Open
validkeys opened this issue Apr 22, 2021 · 3 comments
Open

Update: "Wrap" argument documentation requires updating #730

validkeys opened this issue Apr 22, 2021 · 3 comments

Comments

@validkeys
Copy link
Contributor

validkeys commented Apr 22, 2021

So since my last PR with regards to controlling the visible
status of the pickr by using an external control, something has changed
and simply stopping the propagation of the click event no longer keeps
the pickr library from closing the popup.

Upon further inspection, pickr has a config option "ignoredFocusElements" that,
given an array of DOM elements, will not perform an internal toggling of the calendar popup
if the external element clicked is in the list of ignore elements.

So here's my current workaround:

  <!-- Template -->
  <EmberFlatpickr 
    @onReady=(fn this.onReady)
  />
  <button
    {{on "click" (fn this.toggleCalendarPopup)}}
    {{did-insert (perform this.registerIgnoreElement)}}
  >
    Toggle Calendar
  </button>
// component
class MyComponent extends Component {

  @tracked pickr = null
  
  // this computed is needed as ember-concurrency's waitForProperty helper relies on EmberObject based properties
  @computed('pickr')
  get pickrInitialized() {
    return !!this.pickr
  }

  @action
  onReady(_selectedDates, _dateStr, instance) {
    this.pickr = instance
  }

  @task(function* (el) {
    yield waitForProperty(this, 'pickrInitialized')
    this.pickr.config.ignoredFocusElements.push(el)
  })
  registerIgnoreElement    

}

The "registerIgnoreElement" adds my external elements to flatpickr's list
of external elements to ignore when it's click outside handler is hit.

I'll try to make a PR when I have some time

@RobbieTheWagner
Copy link
Owner

@validkeys we do not support the wrap option, so it not working would be expected https://github.com/shipshapecode/ember-flatpickr/blob/master/addon/components/ember-flatpickr.ts#L99

I don't think we should need all of this to keep the picker open. I know flatpickr constantly changes how they trigger things switching from click to mousedown to various things in between, so some of those changes likely caused the issues you are having. Perhaps stopping another type of event will do the trick?

@validkeys
Copy link
Contributor Author

@rwwagner90 yeah I know it’s not supported, just meant that my previous update to the documentation around stopping the propagation of the events no longer works. So maybe we just want to move it all together since it’s dependent on the inner workings of flatpickr

@RobbieTheWagner
Copy link
Owner

It would be good to provide some solutions if we can, I think.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants