Skip to content

Update: "Wrap" argument documentation requires updating #730

@validkeys

Description

@validkeys

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions